@charset "utf-8";
/* CSS Document */

/** {border:1px solid red !important;}*/

html {height:100%;}
body {font-family:Arial, Helvetica, sans-serif; font-size:14px; margin:0; padding:0; background-color:#FFFFFF; line-height:20px;}
p {}

.underline {text-decoration:underline;}
h3.title {border-bottom:3px solid #EEEEEE;}
.hightlight {background-color:#FFFF99;}
.strike {text-decoration:line-through;}

.border {padding:0; margin:0 0 15px 0; display:block; height:2px; background-color:#CCCCCC; clear:both; font-size:1px; }

h1 {font-size:24px;}
h2 {font-size:24px;}
h3 {font-size:16px;}

img {border:none;}

a:link, a:visited, a:hover, a:active {color:#0066CC;}
a:hover span {cursor:pointer;}

a.readmore {display:block; padding-bottom:15px; padding-left:20px; background:url(../images/read-more-bg.png) no-repeat 0 3px; clear:both;}
a.readmore:link {text-decoration:none;}
a.readmore:hover {text-decoration:underline;}

#container {width:990px; margin:0 auto; padding:0; /*height:auto !important; min-height:100%;*/}

#masthead-wrapper {height:66px; background:url(../images/body-bg.jpg) repeat-x; line-height:20px;}
#masthead {
margin:0 auto;
padding:0;
height:66px;
width:990px;
color:#FFFFFF;
}
/*#masthead h1 {font-family:Arial Narrow, Arial, Helvetica, sans-serif; margin:10px 25px 0 0; line-height:22px; float:left;}
#masthead h1 a {color:#FFFFFF; text-decoration:none;}*/

#logo {float:left; width:128px; height:50px; background:url(../images/logo-bg.jpg) no-repeat; text-align:center; margin:7px 15px 0 0;}
#logo h1 a, #logo h2 a {
font-size:26px;
color:#AED55E;
font-family:Arial Narrow, Arial, Helvetica, sans-serif;
text-decoration:none;
}
#logo h1, #logo h2 {margin:5px 0 3px 0;}

#secondary-bar-wrapper {height:40px; background:url(../images/body-bg.jpg) repeat-x 0 -66px;}
#secondary-bar {
margin:0 auto 12px auto;
padding:0;
color:#949494;
width:990px;
height:28px;
line-height:28px;
clear:both;
}
#secondary-bar h2 {margin:0; padding:0; font-size:14px; display:inline;}
#secondary-bar p {margin:0;}
#secondary-bar a:link, #secondary-bar a:visited, #secondary-bar a:hover, #secondary-bar a:active {text-decoration:none; color:#949494;}
.block-black {font-size:9px; background-color:#171717; padding:3px 4px; font-weight:bold; color:#FFFFFF; text-transform:uppercase;}

#breadcrumbs {display:block; height:25px; line-height:25px; font-size:10px;}
#breadcrumbs a {text-decoration:none;}

#leftcol {
width:675px;
float:left;
padding-bottom:15px;
}

.intro-box {
font-size:12px;
background-color:#EEEEEE;
border:1px solid #CCCCCC;
padding:0 10px;
width:655px;
overflow:auto;
/*zoom:1;*/
/*For IE6 Potential Overflow Issue*/
/*: Option 1) Use zoom property, or Option 2) Use width with the overflow property*/
}

/*ul.category-bar {padding:0; margin:0; list-style:none; background: url(../images/category-bar-bg.png) no-repeat; height:38px; line-height:36px; width:670px;}
ul.category-bar li {float:left; list-style:none; width:178px; text-align:center; padding-left:45px;}
ul.category-bar li a, ul.category-bar li a:visited {color:#FFFFFF; font-weight:bold; text-decoration:underline; }*/

.productbox {border-bottom:3px solid #9D8169; /*background:url(../images/productbox-bg.gif)*/ repeat-x 0 100%;}
.productbox h1 { border-bottom:1px solid #CCCCCC;}
.productbox h1, .productbox h2 {font-size:24px;}
.productbox h1 a, .productbox h2 a {text-decoration:none;}

.specbox {
float:left;
border:1px solid #CCCCCC;
background-color:#EEEEEE;
padding:10px 10px 0 10px;
width:390px;
font-size:12px;
margin:0 0 10px 0;
}
.specbox ul {padding:0; margin:10px 0; list-style:none; }
.specbox ul li {}
.specbox h2 {margin:0 0 5px 0; font-size:18px;}
.specbox a {text-decoration:none;}

.product-image-lg {
float:left;
border:7px solid #CCCCCC;
margin:0 15px 10px 0;
padding:0;
}
a img.product-image-lg {
filter:alpha(opacity=90);
-moz-opacity:0.90;
-khtml-opacity: 0.90;
opacity: 0.90;
}
a img.product-image-lg:hover {
filter:alpha(opacity=100);
-moz-opacity:1.00;
-khtml-opacity: 1.00;
opacity: 1.00;
}

.reviewbox h3.title {color:#000000; background:url(../images/h3-title-bg.jpg) repeat-y; border-top:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; padding:5px 0 5px 5px;}

.screenshots a img {margin-right:6px; padding:5px; border:1px solid #CCCCCC; }
.screenshots a:hover img {border:1px solid #999999;}

.screenshots {}
.screenshots img {border:1px solid #999999; float:left; background-color:#E0E0E0; }
.screenshots img.last {margin-right:0;}

/*************** Tab Bar *******************/

#tab-bar {
background-color:#FFFFFF;
height:36px;
line-height:29px;
display:inline;
}
#tab-bar ul {
margin:0 0 15px 0;
padding:0;
float:left;
list-style:none;
height:36px;
width:990px;
background:url(../images/sprite-tab-bg.gif) repeat-x 0 0;
}
#tab-bar li {float:left; line-height:28px;}
#tab-bar li a {
float:left; 
margin-right:30px;
height:36px;
font-size:12px;
font-weight:bold;
padding:0 5px;
background:none;
text-decoration:none;
}
#tab-bar li a.active {color:#333333;}
#tab-bar li a.inactive {color:#999999;}

#tab-bar li.review-tab a, #tab-bar li.review-tab a.active:hover {background:url(../images/sprite-tab-bg.gif) repeat-x 0 -41px; /*color:#0066CC;*/}
#tab-bar li a.active:hover, #tab-bar li a.active:active {background:url(../images/sprite-tab-bg.gif) repeat-x 0 -82px;}

/*************** Tab Bar *******************/

.thumbnail {float:left; width:210px;  margin:0 10px 10px 0; padding:0;}
.thumbnail img {padding:5px; border:1px solid #999999; float:left; background-color:#F0F0F0;}
.thumbnail span {font-size:14px; font-weight:bold;}
.thumbnail span a {text-decoration:none;}
.thumbnail p {font-size:12px; line-height:normal; margin:5px 0;}

.disclaimer-notice, .author-credit {display:block;  font-size:10px; line-height:normal; clear:both; padding-top:0px; margin-top:15px;}
.disclaimer-notice p, .author-credit p {font-style:italic;}

p.credit {font-size:10px; line-height:85%;}

.reviewbox .disclaimer-notice, .author-credit {border-top:2px solid #CCCCCC; border-bottom:2px solid #CCCCCC; background-color:#EEEEEE; padding-left:5px;}

/*************** Flexible CSS Buttons *******************/

a.button-website span, a.button-regular span {
background:url(../images/sprite-buttons.png) no-repeat 0 0;
display:block;
line-height:27px;
padding:0px 0 0px 30px;
color:#FFFFFF;
text-shadow:1px 1px 0px #333333;
background-color:#FFFFFF;
}
a.button-regular span {text-shadow:none; color:#DDDDDD;}
.specbox a.button-website span, .specbox a.button-regular span  {background-color:#EEEEEE;} /*For the right side of the button's backgroud*/
a.button-website, a.button-regular {
background:url(../images/sprite-buttons.png) no-repeat top right;
/*display:inline;*/
float:left;
height:27px;
margin-right:10px;
margin-bottom:15px;
padding-right:12px; /*Centers left padding on span*/
text-decoration:none;
font-size:18px;
font-weight:bold;
}
.specbox a.button-website, .specbox a.button-regular {margin-bottom:10px;}

a.button-regular span {background-position: 0 -96px;}
a.button-regular {background-position: right -96px;}

a.button-website:hover span 	{background-position: 0 -32px;}
a.button-website:hover 			{background-position: right -32px;}

a.button-website:active span	{background-position: 0 -64px;}
a.button-website:active			{background-position: right -64px;}

a.button-regular:hover span 	{background-position: 0 -128px;}
a.button-regular:hover 			{background-position: right -128px;}

a.button-regular:active span 	{background-position: 0 -160px;}
a.button-regular:active 			{background-position: right -160px;}

/*************** UP *******************/

#rightcol {
float:right;
width:290px;
padding:0 5px;
background-color:#CCCCCC;
/*overflow:auto;*/
/*zoom:1;*/
}

#rightcol p a:hover {text-decoration:underline;}

#course-list {}

#course-list .row {height:70px; border-bottom:2px solid #CCCCCC; /*background-color:#FF0000;*/ /*clear:left;*/ /*overflow:auto;*/}
#course-list .icon-number {float:left; padding:17px 0; margin:0;}
#course-list .product-image {float:left; padding:12px 0 7px 3px; margin:0 3px 0 0; border-left:2px solid #CCCCCC; }

#course-list .rating {}
#course-list .group {float:left; width:152px; /*background-color:#999999;*/}

#course-list span {float:left; margin:10px 0 5px 0; display:block}
#course-list span a {font-size:12px; text-decoration:none;}
#course-list span a {}



/**********************/

.rounded-box-rightcol{width:290px; padding:0; /*margin-bottom:15px;*/ position:relative; margin:5px 0;}
.rounded-box-rightcol-top {height:5px; background:url(../images/corners-290-top.png) no-repeat bottom; font-size:1px;}
.rounded-box-rightcol-bottom {height:5px; background: url(../images/corners-290-bottom.png) no-repeat top; font-size:1px;}
.rounded-box-rightcol-middle {background-color:#FFFFFF; padding:8px 15px;}
.rounded-box-rightcol-middle p {font-size:12px; line-height:19px; padding:0; margin:10px 0;} /*Cannot use margin for p text here...*/
.rounded-box-rightcol-middle h3.title {color: #FF6600; margin:0 0 5px 0; border-bottom:none;/* OR margin:0; padding:0 0 5px 0;*/}


.rounded-box-note {width:670px; padding:0; /*margin-bottom:15px;*/ position:relative; margin:5px 0;}
.rounded-box-note-top {height:5px; background:url(../images/corners-670-top.png) no-repeat bottom; font-size:1px;}
.rounded-box-note-bottom {height:5px; background: url(../images/corners-670-bottom.png) no-repeat top; font-size:1px;}
.rounded-box-note-middle {background-color:#FFFFFF; padding:1px 15px; background:url(../images/corners-670-middle.png) repeat-y;}
.rounded-box-note-middle p {font-size:12px; line-height:19px; padding:0; margin:10px 0;}
.rounded-box-note-middle h3 {margin:0; padding:0 10px 0 0; display:inline;}

.rounded-box-rightcol-middle ul {padding-left:10px; font-size:12px; font-style:italic;}

/*********************/

.clearfix {clear:both;}


#site-links-wrapper {width:100%; height:155px; clear:both; background:url(../images/site-links-wrapper-bg.jpg) repeat-x; margin-top:20px;}
#site-links {width:990px; margin:0 auto;}

#site-links .col1 {width:491px; float:left;}
#site-links .col2 {width:491px; float:right;}

#site-links h3 {color:#FFFFFF; margin:0; padding:20px 0 0 0; border-bottom:3px double #FFFFFF;}
#site-links .col1 ul, #site-links .col2 ul {padding:0; margin:10px 0 0 0; list-style:none;}
#site-links li {font-size:10px; float:left; display:inline; width:163px; }
#site-links li a {color:#949494; text-decoration:none;}
#site-links li a:hover {color:#FFFFFF}

#footer-wrapper {margin:0; padding:0; width:100%; height:35px; clear:both; background:url(../images/footer-wrapper-bg.jpg) repeat-x;}
#footer {width:990px; margin:0 auto; text-align:center; color:#CCCCCC; font-size:10px; line-height:35px;}
#footer span a:link ,#footer span a:visited, #footer span a:hover, #footer span a:active {color:#FFFFFF; text-decoration:none;}


/*********** Course Specific Stuff ***********/
#singing-success #ss.row, #singorama #singoram.row, #vocal-release #vr.row, #pure-pitch-method #ppm.row, #singing-is-easy #sis.row, #singing-excellence #se.row, #sing-and-see #sas.row{background-color:#E2F0C6;} /*CFE6A1*/
/*********** Course Specific Stuff ***********/



.coupon-amount {display:inline; float:left; padding: 0 15px 15px 0;}
p.coupon-instructions {color:#333333; margin:8px 0 3px 0;}

/*************** CC *******************/
.coupon-code {
cursor:default;
width:175px;
height:20px;
line-height:20px;
background-color:#FFF39D;
border:1px solid #FFDC63;
display:inline-block;
padding:1px 0;
font-weight:bold;
text-align:center;
margin:0;
}

.coupon-code.hover {background-color:#FFEE77;} /*Changed from none*/
.coupon-code.active {background-color:#FFEE77;} /*Changed from none*/
#dhtmltooltip {
line-height:100%; /*centers text on tooltip*/
position:absolute;
text-align:justify;
visibility:hidden;
width:160px;
height:20px;
z-index:100;
}
/*CSS class when No click is pressed, Here you can setup your customise popup image*/
#click_copy_open_popup{
width:140px;
height:20px;
color:#ffffff;
font-size:11px;
font-weight:bold;
padding-left:15px;
padding-top:3px;
background:url(../images/coupon-arrow.png) no-repeat;
}
/*CSS class when First click is pressed, Here you can setup your customise popup image*/
#click_copy_popup{
width:80px;
height:20px;
color:#ffffff;
font-size:11px;
font-weight:bold;
padding-left:15px;
padding-top:3px;
background:url(../images/coupon-arrow.png) no-repeat;
}
/*CSS class when second click is pressed, Here you can setup your customise popup image*/
#copied_popup{
width:100px;
height:20px;
color:#ffffff;
font-size:11px;
font-weight:bold;
padding-left:15px;
padding-top:3px;
background:url(../images/coupon-arrow.png) no-repeat;
}
/*************** CC *******************/

.link-row, .link-row-alt {height:80px; background-color:#FFFFFF;}
.link-row-alt {background-color:#EEEEEE;}
.link-box {width:49%; float:left; /*border:1px solid #FF0000;*/ padding-top:10px;}
.link-anchor {color:#0066FF; font-size:12px; display:block; text-decoration:underline; display:inline-block; font-weight:bold; padding-right:17px; background:url(../images/external-link.png) no-repeat 100% 3px;}
.link-description, .contact-information {font-size:10px; line-height:normal; display:block;}
.link-row img, .link-row-alt img {float:left; border:2px solid #999999; margin: 0 5px 0 0; margin-left:10px;}

#article-list h2 a {text-decoration:underline; font-size:18px;}
#article-list .article-snippet {border-bottom:2px dotted #CCCCCC;}

#article {margin-top:10px;}
#article-image {border:5px solid #CCCCCC;}

#article-image #subline span {margin:7px; display:block; font-weight:bold;}
#article .credit {font-size:10px}