/* ============================================== */
/* = (C) COPYRIGHT 2006 MONSTORGRAPHIX, INC     = */
/* =                                            = */
/* = Theme Name: OSP Worldwide 				    = */
/* = Author: Darren Huckey 					    = */
/* = Author URI: http://www.monstorgraphix.com/ = */
/* ============================================== */


body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8em;
	_font-size: 10pt; /*Hack for IE Windoze*/
	text-align: center;
	background-color: #000000;
	color: #333333;
	padding: 0px;
	margin: 0px;
}
p {
	font-size: 1em;
	_font-size: 10pt; /*Hack for IE Windoze*/
	line-height: 1.3em;
	_line-height: 12pt; /*Hack for IE Windoze*/
	text-align: left;
	margin-top: 0pt;
	margin-bottom: 1.5em;
}
h1, h3, h5 {
	font-family: Arial, Helvetica, sans-serif;
	color: #FF3333;
	margin-top: 0pt;
	margin-bottom: 2pt;
	font-weight: bold;
}
h2, h4, h6 {
	font-family: Arial, Helvetica, sans-serif;
	color: #FF9933;
	margin-top: 0pt;
	margin-bottom: 2pt;
	font-weight: bold;
}
h1 {
	font-size: 1.5em;
	_font-size: 16pt; /*Hack for IE Windoze*/
}
h2 {
	font-size: 1.5em;
	_font-size: 16pt; /*Hack for IE Windoze*/
}
h3 {
	font-size: 1.2em;
	_font-size: 14pt; /*Hack for IE Windoze*/
}
h4 {
	font-size: 1.2em;
	_font-size: 14pt; /*Hack for IE Windoze*/
}
h5 {
	font-size: 1em;
	_font-size: 12pt; /*Hack for IE Windoze*/
}
h6 {
	font-size: 1em;
	_font-size: 12pt; /*Hack for IE Windoze*/
}

/* -------- CONTAINER FOR LAYOUT AND CONTENT --------- */
#container {
	text-align: left;
	background-color: #FFFFFF;
	width: 800px;
	margin: 0px auto;
}

/* ---------- HEADER (BEFORE NAV) GOES INSIDE THIS DIV ----------- */
#header {
	color: #FFF;
	padding: 10px 0px;
	margin: 0px auto;
	width: 800px;
	height: 85px;
}

/* ======================================== */
/* = OSP MAIN SITE NAVIGATION BEGINS HERE = */
/* ======================================== */

#nav {
	font-size: 1em;
	_font-size: 10pt;
	text-transform: uppercase;
	/*color: #FF3333;*/
	text-align: left;
	height: 24px;
	width: 800px;
	margin: 0px auto 30px auto;
}
.top {background: url(images/osp_top.gif) 0 0 no-repeat #333333; padding: 10px 0 0 0;}
.bottom {background: url(images/osp_bottom.gif) 0 100% no-repeat; padding: 0 0 7px 0;}

#cartnav {
	font-size: 1em;
	_font-size: 10pt;
	text-transform: uppercase;
	/*color: #FF3333;*/
	text-align: right;
	height: 30px;
	width: 800px;
	margin: 0px auto 30px auto;
}
.top {background: url(images/osp_top.gif) 0 0 no-repeat #333333; padding: 10px 0 0 0;}
.bottom {background: url(images/osp_bottom.gif) 0 100% no-repeat; padding: 0 0 7px 0;}

/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
	margin: 0;
	border: 0 none;
	padding: 0;
	width: 100%;
	list-style: none;
	height: 30px;
}

ul#navmenu li {
	margin: 0;
	border: 0 none;
	padding: 0;
	float: left;
	display: inline;
	list-style: none;
	position: relative;
	height: 24px;
}

ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}

ul#navmenu ul li {
  float: none; /*For Gecko*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu a {
	float: none !important;
	float: left;
	display: block;
	color: #FF3333;
	font: bold .9em/22px Arial, Helvetica, sans-serif;
	_font-size: 10px; /*Hack for IE Windoze*/
	text-decoration: none;
	height: auto !important;
	height: 1%;
	border-top: 1px none;
	border-right: 1px none #FF3333;
	border-bottom: 1px none;
	border-left: 1px none;
	padding-top: 0;
	padding-right: 12px;
	padding-left: 12px;
}

/* ====== PERSISTENT PAGE INDICATOR BEGIN ====== */
#home ul#navmenu a.home, 
#pianos ul#navmenu a.pianos, 
#percussion ul#navmenu a.percussion, 
#guitars ul#navmenu a.guitars,
#orchestra ul#navmenu a.orchestra,
#sound ul#navmenu a.sound {color: #FFF;}
/* ====== PERSISTENT PAGE INDICATOR END ====== */

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
  color: #FFFFFF;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  float: none;
  background: #333333;
  color: #FFF;
  border: solid 1px #333333;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  color: #FF3300;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  background: #333333;
  color: #FFF;
  border: solid 1px #333333;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  color: #FF3300;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #333333;
color: #FFF;
border: solid 1px #333333;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  color: #FF3300;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
  display: block;
}

/* ===================================== */
/* = LAYOUT FOR BODY CONTENT GOES HERE = */
/* ===================================== */

/* ONLY FOR SPLASH PAGE */
.splash {
	background-image: url(images/osp-intro.jpg);
	background-repeat: no-repeat;
	background-position: center 0;
}

#content { width: 800px; color: #CCCCCC; margin: 0 auto; text-align: left; vertical-align: top;}

#content blockquote {
	color: #333333;
	font-size: 1.2em;
	_font-size: 12pt;
	line-height: 1.5em;
	_line-height: 14pt;
	background-image: url(images/notzrim_quote.gif);
	background-repeat: no-repeat;
	padding: 20px;
	margin: 0px;
	background-position: left top;
}

/* ------- NORMAL HYPERLINKS ------- */
#content p a:link, #content blockquote a:link {
	font-weight: bold;
	color: #FF3333;
	padding-left: 5px;
	padding-right: 5px;
}
#content p a:visited, #content blockquote a:visited {
	font-weight: bold;
	color: #999999;
	padding-left: 5px;
	padding-right: 5px;
}
#content p a:hover, #content blockquote a:hover {
	font-weight: bold;
	color: #FF9933;
	padding-left: 5px;
	padding-right: 5px;
}
#content p a:active, #content blockquote a:active {
	font-weight: bold;
	color: #006699;
}

/* =========================================== */
/* = STYLE FOR GREY BOX WITH ROUNDED CORNERS = */
/* =========================================== */

.bl {background: url(images/bl.gif) 0 100% no-repeat #333333;}
.br {background: url(images/br.gif) 100% 100% no-repeat;}
.tl {background: url(images/tl.gif) 0 0 no-repeat}
.tr {background: url(images/tr.gif) 100% 0 no-repeat; padding:10px;}

.clear {font-size: 1px; height: 1px}

/* ============================================ */
/* = STYLE FOR WHITE BOX WITH ROUNDED CORNERS = */
/* ============================================ */

.whbl {background: url(images/bl_white.gif) 0 100% no-repeat #FFF;}
.whbr {background: url(images/br_white.gif) 100% 100% no-repeat}
.whtl {background: url(images/tl_white.gif) 0 0 no-repeat}
.whtr {background: url(images/tr_white.gif) 100% 0 no-repeat; padding:10px;}

/* -------- WHITE CONTAINER 550PX WIDE -------- */
#wh550container { width: 550px; height: 210px; color: #333333; margin: 0 auto; text-align: left; float: right;}
#wh550content {width: 540; height: 200;  overflow: auto;}

/* --------- WHITE CONTAINER -- FULL SIZE ---------- */
#whcontainer { width: 780px; color: #333333; margin: 0 auto; text-align: left;}
#whcontainer p {color: #333;}

#productdetail {
	clear: both;
}

#whcontainer #productdetail h1 {
	font-size: 1.2em; 
	color: #FFF; 
	text-transform: uppercase;
	background-color: #999999;
	padding: 5px 10px;
	margin: 5px 0;
}

#productsummary {
	background-color: #FFF;
}

/* ========================================== */
/* = IMAGES THAT NEED TO FLOAT TO THE RIGHT = */
/* ========================================== */


img.rightsir  {
	float: right; padding: 0 0 0 5px; margin 0px; vertical-align: top;}

	/* Hides from IE5-mac \*/
	* html .rightsir {height: 1%;}
	/* End hide from IE5-mac */
	
	
/* ---------- CALLOUT COLUMN BEGINS HERE ---------- */
#callout {
	border: solid 1px #CCCCCC;
	float: left;
	width: 225px;
	margin-top: 5px;
	margin-right: 20px;
	margin-bottom: 15px;
	margin-left: 0px;
}
#callout h1 {
	color: #000;
	font-size: 1.4em;
	_font-size: 14pt; /*Hack for IE Windoze*/
	text-transform: uppercase;
	color: #FFF;
	text-align: center;
	background-color: #FF3333;
	padding:5px 0;
	margin: 0px;
	margin-bottom: 10px;
}
#callout h2, #callout h3, #callout h4, #callout h5, #callout h6 {
	font-size: 1.2em;
	_font-size: 12pt; /*Hack for IE Windoze*/
	color: #999999;
	padding-bottom: 0px;
	padding-left: 10px;
	margin-bottom: 0px;
}
#callout p {
	font-size: .9em;
	_font-size: 9pt; /*Hack for IE Windoze*/
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 1.5em;
	margin-left: 10px;
}

/* ------------ FOOTER GOES HERE ------------- */
#footer {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #333333;
	color: #FFFFCC;
	font-size: .6em;
	_font-size: 7pt; /*Hack for IE Windoze*/
	height: 25px;
	padding-bottom: 5px;
	text-align: center;
	margin: 20px auto;
	width: 800px;
	clear: both;
}
#footer a:link {
	color: #FF3333;
	text-decoration: none;
}
#footer a:visited {
	color: #CC3300;
	text-decoration: none;
}
#footer a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
#footer a:active {
	color: #FFFFCC;
	text-decoration: underline;
}

#footer2 {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #333333;
	color: #FFFFCC;
	font-size: .6em;
	_font-size: 7pt; /*Hack for IE Windoze*/
	height: 25px;
	padding-bottom: 5px;
	text-align: center;
	margin: 20px auto;
	width: 100%;
	clear: both;
}
#footer2 a:link {
	color: #FF3333;
	text-decoration: none;
}
#footer2 a:visited {
	color: #CC3300;
	text-decoration: none;
}
#footer2 a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
#footer2 a:active {
	color: #FFFFCC;
	text-decoration: underline;
}

/* ---------- PDF LIST ITEMS ---------- */
#content ul.pdf {
	padding: 0px 0px 0px 10px;
	margin: 0px;
}

#content ul.pdf li {
	line-height: 30px;
	list-style-type: none;
	background-image:  url(images/icons/icon_pdf.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 20px;
}
#content ul.pdf a:link {
	color: #33CC33;
	text-decoration: none;
}
#content ul.pdf a:visited {
	color: #999999;
	text-decoration: none;
}
#content ul.pdf a:hover {
	color: #CCFF66;
	text-decoration: underline;
}
#content ul.pdf a:active {
	color: #33CCFF;
	text-decoration: underline;
}

/* ======================== */
/* = MISCELLANEOUS STYLES = */
/* ======================== */

.padtenbottom {
	margin: 0px 0px 10px 0px;
}

/* ------ FOR SHOW/HIDE TEXT ------- */
.texthidden {display:none}
.textshown {display:inline}


/* =================================================== */
/* = IE HACK TO FIX DISAPPEARING CONTENT. I HATE IE. = */
/* =================================================== */

 * html .visualIEFloatFix { height: 0.01%; }.descriptor {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	line-height: 8pt;
	color: #000000;
}