/* @override 
	http://local.giamusic.com/css/revisedhpME.css */

@charset "UTF-8";
/* this Document holds styles that control Music Education Home page. This document was created as part of creating revised skin for the home page. Styles below come from the -head- of the index page. In that head portion were 2 <style> tags below styles are conjunction of them respectively head 1 is from <style> tag 1 and head 2 are from <style> tag 2. Majority of the revised styles is in head 2 I left head 1 though since it may still have some style which control some less apparent elememts and will be cleaning this with time. Style from this document overwrite styles from the general style sheet */

/*styles from the head 1*/

#featurenav { margin: 30px; text-align: left; padding-bottom:20px; }

#featurenav { margin: 15px; text-align: center }
#featurenav a { margin: 0 5px; padding: 4px 4px; border: 2px solid #5A79A5; background: #CE0000; text-decoration: none; color:#FFFFFF; font-size:10pt; }
#featurenav a.activeSlide { background: #DEE7EF; border: 2px solid #d3220f; color:000000;}
#featurenav a:hover {color:#400D12; background:#9CAAC6; border: 2px solid #d3220f;}


#featurenav a:focus { outline: none; }
#slideshow { height: 550px; margin: 10px auto }
.regularText {	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	color: #000000;
}
.pics { 
    height:  209px;  
    width:   496px;  
    padding: 0;  
    margin:  0;
    z-index: 1;
} 
 
.pics img { 
    padding: 0;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  496px; 
    height: 209px; 
    top:  0; 
    left: 0; 
} 
#clickHere .style31 .style29 a {
	font-family: 'Open Sans', sans-serif;
	color: #FFFF66;
}
.style46 {font-size: 11px}
#closed {
	text-align: center;
	margin-bottom: 10px;
}
#closed p{
	color: blue;
	font-size: 16px;
	font-weight: bold;
}
.hymnalContents {
	font-size: 13px;
}
.clearfloat {clear:both;}

#revisedOrderAssembly {
	padding: 0 0 0 0;
	border: thin solid #CCCCCC;
	margin: 0 0 7px 0;
}


#revisedOrderAssemblytype {
	padding: 5px 0 5px 10px;
}
#massSettingmonth {
	padding: 0 0 0 0;
	border: thin solid #CCCCCC;
	margin: 0 0 7px 0;
}

.style47 {
	color: #CC0000;
	font-weight: bold;
}
.style48 {
	font-size: 15px;
	color: #999966;
}
.style49 {
	color: #999933;
	font-weight: bold;
}
.style50 {color: #999999}

/*end styles from the head 1/



/*styles from the head 2*/

<!--
.editionLink1 {	font-size: 12px;
	font-weight: bold;
}
.msmButtons {
	float: left;
	margin: 0 0 0 20px;
}
.sidebarbox2 {
	background: url(/images/box-headerback.jpg) repeat-x #FFF;
	padding: 0;
	width: 99%;
	border: 1px solid #ccc;
	margin-bottom: 20px;
}


/*lech classes*/

#bottom-other-sites td { border-right:#000000; }
#slideshow img { height:140px; }
#bottom-other-sites h1 { background:url("http://www.giamusic.com/images/box-headerback.jpg"); color:#990000; padding:5px; background-repeat:repeat-x;}


/*making sidebars same widths even though there is currently one pixel issue left one is 184 and right is 201 - I am making left 191 and right 193 */

.home200908leftbar { width:192px;}



/* unifying objects inside the sidebars */

.box-wrapper {margin:0 0 15px 0} /*added this class to make it possible to have entire box in one div*/

.box-wrapper-no-border { margin:0 0 15px 0} /*added this class to make it possible to have entire box in one div*/

.current-catalogue { width:190px; height:207px; margin:0; padding:0; background:#FFFFFF; border:none;} /*height is 207 as there is 1px border around - height of the whole box need to always be 209px - 2x1px = 2 px, same thing for width*/


/*lech: my own classes and styles I added are below*/

h2.box-header { font-family:'Open Sans', sans-serif; color:#003E7E; background:#ECECEC; padding:0 0 2px 5px; margin:0; font-size: 18px;}


/*this is the content of t he box wrapper. height of the a is set to 18 because there is 1px padding applied to paragraph and link needs to take up the whole space of the div.box-link so it is possible to apply hover effect */

div.box-link { height:19px; margin:0; background:#ffffff; width:100%;}

div.box-link p { font-family:'Open Sans', sans-serif; color:#003E7E;  text-align:center; margin:0; padding:0 ; overflow:hidden; display:block; }
div.box-link a {  color:#003E7E; font-weight:bold; background:#ffffff; display:block; height:18px; margin:auto; overflow:hidden; padding-top:1px;}

div.box-link a:hover { font-family:'Open Sans', sans-serif; color:#003E7E;margin:0; padding-top:1px; overflow:hidden; font-weight:bold; background:#ececec; }

/*LEFT SIDEBAR*/

.sidebarbox { height:700px; overflow:hidden;} 

@-moz-document url-prefix() { .sidebarbox { height:700px;} }

.current-catalogue img {margin-top:5px;}


/*belo styles related to quicklinks - widths and margins after current catalog box*/


.sidebarbox { width:190px; margin:0; padding:0; background:#FFFFFF; border:none; clear:both;}



.sidebarbox a:link { color:#003E7E; background:#ffffff; display:block; padding:3px; font-family:'Open Sans', sans-serif; margin:5px; padding:3px;}

.sidebarbox a:hover { background:#ececec; display:block;}

@-moz-document url-prefix() { 
.sidebarbox a:link { padding:2px;} /*different styles for mozilla as it looks it is displaying text bigger*/

.sidebarbox a:hover { background:#ececec; display:block;}

}



/*changes to the center bar*/



#center-feature-wrap {
	width: 496px;
	margin-bottom: 10px;
} /*changed 17px to 15px to align with the left colum width was 497 for I dont know what reason since the width of the whole column is 496px hence the right border of the image was invisible*/

.pics img { width:494px;} /*image was too wide hence right border was invisible. Since the width of this column is 496 I made picture image 494 to allow 2x1px border*/

div.header-link { margin:0; background:#ffffff; width:494px; border:1px solid #CCC;}

div.header-link h2 { font-family:'Open Sans', sans-serif; color:#003E7E;  text-align:center; margin:0; padding:0; overflow:hidden; display:block; }
div.header-link a {  color:#003E7E; font-weight:bold; background:#dcdddf; display:block; overflow:hidden; padding:0 0 1px 0}/*there is 1px padding to align with the header on the left , just 1px because header on the left only has top border and this header has two*/

div.header-link a:hover { background:#ececec; }


/*contributor-collection*/

div.contributor-collection { margin:0 0 15px 0;}

div.contributor-collection div.box-link a {background:#dcdddf;}

div.contributor-collection div.box-link a:hover {background:#ececec;}

div.contributor-collection p.copy { padding:5px;}

/*contributor*/
div.contributor { width:494px; }

div.contributor img { margin:5px; float:left;}

div.contributor p { font-family:'Open Sans', sans-serif; font-size:9pt;  text-align:left;}

div.contributor div.box-link p { text-align:center;}

/*changing colo of the links in the "copy" class"*/

p.copy a { color:#003E7E;}


/*featured-collection*/

div.featured-collection { width:494px; }

div.featured-collection img { margin:5px 0 5px 5px; float:right;}

div.featured-collection p { font-family:'Open Sans', sans-serif; font-size:9pt;  text-align:left;}

div.featured-collection div.box-link  { width:100%; float:left;}/*if there are two links the width must be 247px*/
div.featured-collection div.box-link p { text-align:center;}


/*right column*/

.home200908rightbar { width:192px; margin-bottom:0; padding:0;}



/*social-media-me*/

div.social-media-me { text-align:center; width:192px; height:231px; margin:0 0 10px 0; overflow:hidden;  }

div.social-link-me {height:110px; overflow:hidden; margin:0 0 16px 0; background:#dcdddf;} /* I since to items removed I had to remove 2x8px = 16 px, I added 8 px to the margin (it was 8) and 4px to the height and since there are 2 items it gives another 8*/

div.social-link-me .social-text { width:163px; float:right}

div.social-link-me h2 { width:106px; display:block; color:#2b4288; padding:0; margin:35px 0 8px 60px; font-size:12pt;  }

div.social-link-me a {display:block; color:#666; }

div.social-link-me a:hover {color:#2b4288;}

.social-link-me img { float:left; margin:20px 0 0 10px;}





	/*icons*/

#facebook-icon {
	margin:15px 5px 0 10px; /*21 px because width of the div is 192 each icon is 50px so 192-150=42 then 42/2=21 we need only two right margins to first two icons*/
	display: block;
	width: 70px;
	height: 70px;
	text-indent:-9999px;
	float:left;
	
}

#facebook-icon a {
	display: block;
	width:100%;
	height:100%;
	background: url(/images/facebook-sprite-big.png) no-repeat top left;
	
}
	
#facebook-icon a:hover {
	background-position: 0 -70px;
	
}



#envelope-icon {
	margin:15px 5px 0 10px; /*21 px because width of the div is 192 each icon is 50px so 192-150=42 then 42/2=21 we need only two right margins to first two icons*/
	display: block;
	width: 70px;
	height: 70px;
	text-indent:-9999px;
	float:left;
	
}

#envelope-icon a {
	display: block;
	width:100%;
	height:100%;
	background: url(/images/envelope-sprite.png) no-repeat top left;
	
}
	
#envelope-icon a:hover {
	background-position: 0 -70px;
	
}



/*RIGHT SIDEBAR*/

.sidebarbox2 { height:500px; overflow:hidden; border:none; background-image:none; background:none; width:100%; margin:0; padding:0;} /*for explanation of 371 see comment for left sidebar*/

.sidebarbox2 p { color:#273c7b; background:#ffffff; font-family:Verdana, Geneva, sans-serif; margin:5px; padding:0;}

.sidebarbox2 a { color:#273c7b; background:#ffffff; display:block; font-family:Verdana, Geneva, sans-serif; margin:5px; padding:3px;}





.sidebarbox2 a:hover { background:#ececec;}

/*clearing the links behavior for the banner*/

.sidebarbox2 a.banner { color:#273c7b; background:#ffffff; display:block; font-family:'Open Sans', sans-serif; margin:0; padding:0; border:none;}

.sidebarbox2 img.banner { border:none;}

@-moz-document url-prefix() { .sidebarbox2 { height:504px;} .sidebarbox2 img.banner { border:none;}}


div#bottom-wrapper { width:911px; margin-left:10px;}


.featured-products img {height:140px;}


/* music ed classes*/


#external-banners img { width:190px; margin:5px 0;}

-->



/*end styles from the head*/