/* 13/06/2016: New homepage styles. Combined from old home_style.css and default_xx.css */

p {
    margin: 0;
}

.homepagecontent.EN {
    margin-top: 8px;
    font-size: 10.8px;
}

.homepagecontent.XX {
    margin-top: 10px;
}

#HomeLeftCol {
	float: left;
	width: 360px;
	margin-right: 8px;
}
#HomeLeftCol #More, #HomeLeftCol #Rss {
	float: right;
	margin: 0 0 0 6px;
}
#NewsWrapper {
	position: relative;
    border-radius: 4px;
    overflow: hidden;
}

#HomeLeftCol h2 {
	line-height: 32px;
	background: url('/img_s/homepage/h2header.gif') no-repeat left top;
	font-size: 1.4em;
	color: #ffffff;
	display: block;
	padding: 0 8px;
}
		
div.MoreButton {
	top: 8px;
	right: 8px;
	position: absolute;
	background: url('/img_s/homepage/moretab-left.gif') no-repeat left top;
	line-height: 17px;
	padding-left: 6px;
}
div.MoreButton span {
	padding-right: 6px;
	display: block;
	background: url('/img_s/homepage/moretab.gif') no-repeat right  top!important;
}
div.MoreButton a {
	color: #ffffff;
	text-decoration: none;
}

#NewsWrapper .NewsThumb {
	width: 136px; 
	height: 144px;
	position: absolute;
	display: none;
}

#NewsWrapper .NewsThumb-selected {
	display: block;
	
}
#NewsWrapper .NewsThumb img{
	position: absolute;
	bottom: 0;
	left: 0;
	border: none;
}
#NewsWrapper .NewsThumb a {
	display: block;
	width: 136px;
	height: 144px;
}
#NewsWrapper ul {
	width: 224px;
	float: right;
	list-style: none;
}
#NewsWrapper ul li {
	height: 48px;
	display: block;
    background-color: #333;
    background-repeat: no-repeat;
}

#NewsWrapper ul li a {
	text-decoration: none;
	display: block;
	height: 45px;
	color: #396E71;
	font-weight: bold;
	padding: 3px 6px 0 16px;
	overflow: hidden; 
}

#NewsWrapper ul li.Row1, #NewsWrapper ul li.Row3 {
	background-image: url('/img_s/homepage/row1-normal.gif');
}	

#NewsWrapper ul li.Row2 {
	background-image: url('/img_s/homepage/news_row-normal.gif');
}	

#NewsWrapper ul li.Selected {
	background-image: url('/img_s/homepage/news_row-hover.gif');
}

#NewsWrapper ul li.Selected a {
	color: #fff;
}

div#Performances {
	position: relative;
    overflow: hidden;
    border-radius: 4px;
}
#HomeLeftCol ul.Performances {
	background: #efefef;	
	height: 143px;
	list-style: none;
	background: url('/img_s/homepage/performances_bg.gif') no-repeat left top;
}
#HomeLeftCol ul.Performances li {
	min-height: 36px;
}
#HomeLeftCol ul.Performances li strong {
	display: block;
}
#HomeLeftCol ul.Performances li span {
    padding: 4px 8px;
	display: block;
}
#HomeLeftCol ul.Performances li.Alternate {
	background: url(/img_s/homepage/alternate.png);
}

#Shop {
	background: url('/img_s/homepage/b2b_shop_bg.jpg') no-repeat left top;
	height: 385px;
	width: 582px;
	float: left;
}

#Indent {
	float: left;
	margin: 12px;
	background: url('/img_s/homepage/shopatboosey.png')  no-repeat top left;
}
#Indent a {
	display: block;
	width: 227px;
	height: 75px;
}

p#TagLine {	
	color: #fff;
	width: 170px;
	margin: 44px 16px 0 0;
	float: right;
	font-size: 1.1em;
}

div.ProductItem {
	width: 196px;
	height: 90px;
	float: left;
	margin: 8px 0 0 8px;
	position: relative;
	padding-left: 74px;
}

div.ProductItem img {
	position: absolute;
	left: 0;
	border: 1px solid #efefef;
}

div.ProductItem h2, div.ProductItem h2 a {
	font-size: 1.0em;
	display: block;
	color: #333333;
	text-decoration: none;
}

div.ProductItem p, div.ProductItem strong {
	display: block;
	color: #333;
}

div.ProductItem a.button {
	position: absolute;
	bottom: 4px;
	right:4px;
	background: url('/img_s/homepage/readmore.gif') no-repeat right  bottom;
	height: 20px;
	width: 50px;
	display: block;
}

div.ProductItem a.button span {
	display: none; 
}

#AV {
	margin-top: 8px;
	width: 385px;
	float: left;
}

#AVContent {
	height: 242px;
	position: relative;
}
#AV h2 {
	line-height: 32px;
	background: url('/img_s/homepage/av_header.gif') no-repeat left top;
	font-size: 1.4em;
	color: #FFF;
	padding-left: 52px;
}

#AVContent a.AVLink {
	width: 385px;
	height: 210px;
	background: url('/img_s/homepage/av_play.png')  no-repeat left top;
	display: block;
	position: absolute;
	top: 32px;
	left: 0;
    color: #333;
	text-decoration: none;
	font-weight: bold;
}

#AVContent p {
	position: absolute;
	left: 0;
    right: 0;
    bottom: 20px;
	padding: 3px 6px;
	background: url('/img_s/homepage/av_title.png') ;
}

#Mail, #Scores {
	margin-top: 8px;
	width: 188px;
	height: 117px;
	float: right;
	background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}
#Mail h2, #Scores h2 {
	box-sizing: border-box;
	font-size: 1.4em;
	color: #FFF;
	padding: 0 8px;
	position: relative;
    line-height: 32px;
}
#Mail > div, #Scores > div {
	padding: 14px 8px;	
}

#Mail h2 {
	height: 36px;	
	background: url('/img_s/homepage/mail_header.gif') no-repeat left top;	
}
#Scores h2 {
	background: rgb(34,137,142);
	background: linear-gradient(135deg, rgba(34,137,142,1) 0%, rgba(18,89,92,1) 100%);
}

#Scores > h2 > .icon {
	display: block;
	position: absolute;
	top: 1px;
	right: 2px;
	width: 39px;
	height: 36px;
	background: url("/img_s/homepage/onlinescore_icon.png") no-repeat;
}






#ShopWrapper {
	background: url('/img_s/homepage/shop_module_bg.gif') no-repeat left bottom;
	width: 565px;
	height: 270px;
	margin: 107px 7px 6px;
}
#ShopWrapper #Search, #ShopWrapper #Instruments, #ShopWrapper #Grades {
	float: left;
	height: 68px;
	margin: 0;
}

#ShopWrapper #Search {background: url('/img_s/homepage/shop_search.jpg') #c22401 no-repeat top left; width: 184px; position: relative;}
#ShopWrapper #Instruments {background: url('/img_s/homepage/shop_browse.jpg') #00a3c6 no-repeat top center; width: 196px; overflow: hidden;}
#ShopWrapper #Grades {background: url('/img_s/homepage/shop_grades.jpg') #ed9205 no-repeat top right; width: 185px;}

#Instruments ul{
	width: 186px; 
	margin:25px 0px 0px 7px;
	font-size: 0.8em;
	list-style: none;
	
}
#Instruments ul li {
	float: left;
	margin: 0 1px 1px 0;
	padding-left: 1px;
	background: #35b6d1;
	display: block;
	color: #FFF;
	background: #35b6d1 url('/img_s/homepage/browse_inst_tab.gif') no-repeat top left;

}
#Instruments ul li a {
	margin-left: 1px;
	padding-right: 1px;
	background: #35b6d1 url('/img_s/homepage/browse_inst_tab.gif') no-repeat top right;
	color: #FFF;
	text-decoration: none;
}

#Instruments ul li a:hover {
	background: #006a8e  url('/img_s/homepage/browse_inst_tab_hover.gif') no-repeat top right;
}
 #Instruments ul li:hover {
	background: #006a8e  url('/img_s/homepage/browse_inst_tab_hover.gif') no-repeat top left;
}

#Search .searchbox {
	position: absolute;
	top: 40px;
	left: 8px;
	border: solid 1px #8b3900;
	height: 15px;
	width: 140px;
	padding: 3px 2px 0px 4px;
	font-size: 0.8em;
	color: #000;
}

#Search .searchbtn {
	bottom: 8px;
	right: 8px;
	position: absolute;
}

#Grades a {
	color: #FFF;
	display: block;
	margin: 26px 4px 4px 10px;
	line-height: 12px;
	color: white;
	text-decoration: none;
}



#QuickLinks {
	width: 348px;
	height: 18px;
	background: #dcdcdc;
	margin-bottom: 8px;
	background: url('/img_s/homepage/performances_bg.gif') no-repeat left bottom;
	padding: 8px 6px;
}

#QuickLinks  .List {
	margin: 0;
	border: none;
	float: left;
    font-size: 13px;
}

a.moduleLink {
	float: right;
	display: block;
	text-decoration: none;
	padding-right: 30px;
	font-size: 1.2em;
	font-weight: bold;
	color: #396e71;
	background: url('/img_s/homepage/go_button.gif') no-repeat right 50%;
	min-height: 16px;
    margin-top: 1px;
}

#QuickLinks div.QL-CompLinks {
	display: none;
}

/* New HTML composer rotator module		*/
.rotator-module {
    position: relative;
	clear: both;
}

.homepagecontent.EN .rotator-module {
	padding: 10px 0 0 0;
	height: 232px;
}
.homepagecontent.XX .rotator-module {
    padding: 5px;
	width: 940px;
	height: 311px;
	background: #fff url("/img_s/homepage/Homepage_Slideshow_BG.png") no-repeat;
}

.rotator-module-background {
	background: #ddd; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #fafafa 0%, #7f7f7f 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fafafa), color-stop(100%,#7f7f7f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  #fafafa 0%,#7f7f7f 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  #fafafa 0%,#7f7f7f 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  #fafafa 0%,#7f7f7f 100%); /* IE10+ */
	background: linear-gradient(135deg,  #fafafa 0%,#7f7f7f 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#7f7f7f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	height: 200px;	
}

.homepagecontent.XX .rotator-module h3 {
	background: #186c70; /* Old browsers */
	background: -moz-linear-gradient(-75deg,  #22898e 30%, #12595b 70%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(30%,#22898e), color-stop(70%,#12595b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-75deg,  #22898e 30%,#12595b 70%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-75deg,  #22898e 30%,#12595b 70%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-75deg,  #22898e 30%,#12595b 70%); /* IE10+ */
	background: linear-gradient(105deg,  #22898e 30%,#12595b 70%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22898e', endColorstr='#12595b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	border-radius: 5px 5px 0 0;
}

.rotator-module ul {
	position: absolute;		
	list-style: none;		
}

ul.rotator-module-items, li.rotator-module-item, li.rotator-module-item a {
	top: 0;
	right: 0;
	bottom: 0;	
	left: 0;
	overflow: hidden;
}

.homepagecontent.XX ul.rotator-module-items {
	top: 5px;
	right: 5px;
	bottom: 5px;	
	left: 5px;
	border-radius: 5px;
}


ul.rotator-module-items * {
	position: absolute;
}

li.rotator-module-item {
	display: none;
}
li.rotator-module-item.rmi0 {
	display: block;	
}

.homepagecontent.EN li.rotator-module-item div {
	top: 55px;
	left: 6px;
    width: 350px;
}

.homepagecontent.XX li.rotator-module-item div {
	bottom: 114px;
	left: 15px;
	width: 320px;
	background: rgb(240, 240, 240);
	background: rgba(224, 224, 224, 0.4);
	border-radius: 5px;
}

.homepagecontent.EN li.rotator-module-item h3 {
    color: #396E71;
    font-size: 1.1em;
    font-weight: bold;
	text-transform: uppercase;
    padding-left: 4px;
}

.homepagecontent.XX li.rotator-module-item h3 {
	position: relative;
    font-size: 15px;
	line-height: 16px;
    font-weight: bold;
	text-transform: uppercase;
	padding: 3px 5px;
	color: #fff;
}

li.rotator-module-item p {
	position: relative;
	color: #333;
}

.homepagecontent.EN li.rotator-module-item p {
	top: 28px;
	left: 0;
	width: 180px;
	padding: 3px;
	background: rgb(255, 255, 255);
	background: rgba(255, 255, 255, 0.8);
	border-radius: 4px;
}

.homepagecontent.XX li.rotator-module-item p {
	margin: 5px;
	font-weight: bold;
}

li.rotator-module-item img {
	bottom: 0;
	right: 0;
	border: 0;	
}

.homepagecontent.XX li.rotator-module-item img {
	border-radius: 0 5px 5px 0;		/* for safari which does not respect radiused clipping by parent element */
}

ul.rotator-module-thumbs {
	padding: 2px 4px 4px 2px;
	left: 5px;
	bottom: 5px;
	background: #fff;
	border-radius: 4px;
}

.homepagecontent.XX ul.rotator-module-thumbs {
	padding: 0 7px 7px 0;
	left: 20px;
	bottom: 20px;
	background: #eee;
	border-radius: 5px;
}


ul.rotator-module-thumbs li {
	margin: 2px 0 0 2px;
	display: inline-block;
	opacity:0.5;
	filter:alpha(opacity=50);
	float: left;
}

.homepagecontent.XX ul.rotator-module-thumbs li {
	margin: 7px 0 0 7px;
	opacity:0.4;
	filter:alpha(opacity=40);
}

div#composer-rotator.rotator-module ul.rotator-module-thumbs li.rmt-active,
div#composer-rotator.rotator-module ul.rotator-module-thumbs li:hover {
	opacity:1.0;
	filter:alpha(opacity=100);
}

ul.rotator-module-thumbs li img {
	width: 38px;
	height: 38px;
	cursor: pointer;
	border-radius: 2px;
	display: block;
}

.homepagecontent.XX ul.rotator-module-thumbs li img {
	width: 65px;
	height: 65px;
	border-radius: 3px;	
}

/* home page modules */

.homepagepanels {
  height: 187px;
  margin: 10px 0;
}

.homepagepanels img {
  width: 229px;
  height: 157px;
  border: 0;
  float: left;
}

.homepagepanels a + a img {
	margin-left: 10px;
}