/* Common elements */ 

body                    { padding: 0; background-image: url(../img/sound323_background.gif); background-repeat: repeat; 
                        font-family: Helvetica, Verdana, Arial, Sans-serif; font-weight: normal; margin-bottom: 20px; font-size: 13px; color: #404040;
                        text-align: center; /* IE 6 hack for centering all content */ }
a:link, a:visited       { color: #0077c0; text-decoration: none; }
a:hover                 { color: #ffcc00; text-decoration: none; }
a:active                { background-color: #ffcc00; color: #ffffff;}
input				    { padding: 4px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; 
                        border: 1px solid #0077c0; color: #000000; }
input:hover		    	{ border: 1px solid #ffcc00; }
input:focus			    { border: 1px solid #ffcc00; color: #0077c0; }
textarea			    { padding: 4px; font-size: 13px; 
                        font-family: Helvetica, Arial, sans-serif; font-weight: normal; border: 1px solid #0077c0; 
                        color: #000000; }
textarea:hover		    { border: 1px solid #ffcc00; }
textarea:focus		    { border: 1px solid #ffcc00; color: #0077c0; }
select				    { padding: 4px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; 
                        border: 1px solid #0077c0; color: #000000; }
select:hover		    { border: 1px solid #ffcc00; }
select:focus		    { border: 1px solid #ffcc00; color: #0077c0; }
.formbutton  		    { padding: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; color: #ffffff; 
                        background-color: #0077c0; }
.formbutton:hover 	    { color: #ffcc00; background-color: #ffffff; }
.formbutton:active	    { color: #0077c0; background-color: #ffffff; border: 1px solid #0077c0; }
.linkbutton a:link, .linkbutton a:visited       
                        { padding: 4px; background-color: #0077c0; text-decoration: none; color: #ffffff; 
                        font-weight: bold; border: 1px solid #0077c0; }
.linkbutton a:hover     { color: #ffcc00; background-color: #ffffff; text-decoration: none; border: 1px solid #ffcc00; }
.linkbutton a:active    { background-color: #ffffff; color: #0077c0; border: 1px solid #0077c0; }

#container              { margin: 0px auto; text-align: left; /* IE 6 hack for centering all content */ 
                        width: 980px; line-height: 130%; }
.form td                { padding-top: 3px;padding-bottom: 3px; }
.form th                { padding-top: 3px;padding-bottom: 3px; }

/* Header */

#header                 { float: left; width: 980px; font-size: 13px; font-weight: bold; }
#logo                   { width: 180px; float: left; text-align: center; padding:10px; margin-right: 10px;}
#nav                    { min-height: 120px; width: 540px; float: left; background-color: #ffffff; padding: 10px; 
                        margin-right: 10px; }
#navtop                 { padding-bottom: 20px; }
#navtop a:link, #navtop a:visited       
                        { padding: 2px; margin-right: 6px; color: #006699; }
#navtop a:hover         { color: #ffcc00; }
#navtop a:active        { background-color: #ffcc00; color: #ffffff; }
#navbottom a:link, #navbottom a:visited       
                        { padding: 2px; margin-right: 6px; color: #ffcc00; }
#navbottom a:hover      { color: #006699; }
#navbottom a:active     { background-color: #006699; color: #ffffff; }
#login                  { font-size: 11px; min-height: 120px; background-color: #ffffff; float: left; width: 180px; 
                        padding: 10px; font-weight: normal; }

/* Header: Messages */ 

#messages               { margin-left: 210px; float: left; white-space: nowrap; margin-top: 10px; }
.message                { font-size: 13px; font-weight: bold; padding: 6px; width: 100%; color: #ffffff; 
                        background-color: #aaa9a6; float: left; margin-bottom: 10px; }
.warning                { font-size: 13px; font-weight: bold; padding: 6px; width: 100%; color: #ffffff; 
                        background-color: #ff9900; float: left; margin-bottom: 10px; }
.success                { font-size: 13px; font-weight: bold; padding: 6px; width: 100%; color: #ffffff; 
                        background-color: #009000; float: left; margin-bottom: 10px; }
.error                  { font-size: 13px; font-weight: bold; padding: 6px; width: 100%; color: #ffffff; 
                        background-color: #900000; float: left; margin-bottom: 10px; }
                        
                        
/* Footer */

#footer                 { width: 980px; font-size: 11px; }
#footerleft             { background-color: #ffffff; min-height: 180px; float: left; width: 180px; margin-right: 10px; 
                        padding: 10px; }
#footerright            { background-color: #ffffff; min-height: 180px; float: left; width: 540px; padding: 10px; }


/* Content */

#content                { float: left; width: 980px; margin-bottom: 10px; min-height: 400px; }
#leftcol                { font-size: 11px; background-color: #ffffff; float: left; width: 180px; margin-right: 10px; 
                        padding: 10px; min-height: 400px;}
#centrecol              { background-color: #ffffff; float: left; width: 540px; padding: 10px; margin-right: 10px; 
                        min-height: 400px; }
#rightcol               { background-color: #ffffff; float: left; width: 180px; padding: 10px; font-size: 11px; 
                        min-height: 400px;}
#centrerightcol         { background-color: #ffffff; float: left; width: 750px; padding: 10px; min-height: 400px; }
.heading                { font-size: 22px; font-weight: bold; line-height: 130%; }
.small                  { font-size: 12px; color: #a0a0a0; font-style: italic; }

/* Content: Item View */ 

.itemimage              { float: left; width: 200px; margin-right: 10px; }
.iteminfo               { float: left; width: 330px; }
.itemartist             { font-size: 18px; line-height: 120%; font-weight: bold; }
.itemtitle              { font-size: 16px; }
.itemprice              { color: #006699; font-weight: bold; font-size: 14px; }
.itemprice a:link, .itemprice a:visited       
                        { background-color: #006699; color: #ffffff; padding: 4px; font-size: 14px; 
                        font-weight: bold; border: 1px solid #0077c0;}
.itemprice a:hover 	    { color: #ffcc00; background-color: #ffffff; border: 1px solid #ffcc00; }
.itemprice a:active     { color: #0077c0; background-color: #ffffff; border: 1px solid #0077c0; }

/* Content: Browse View */ 

.browse                 { width: 540px; margin-bottom: 20px; }
.browseimage            { float: left; width: 100px; margin-right: 10px; }
.browseinfo             { float: left; width: 430px; }

/* Content: Homepage */ 

#news                   { float: left; margin-top: 10px; }
.newsimage              { padding-right: 10px; padding-bottom: 10px; float: left; width: 150px; }
.newstext               { float: left; width: 380px; }
                    
/* Content: Cart */ 
                
.progresson             { font-size: 12px; color: #ffffff; background-color: #0077c0; padding: 4px; }
.progressoff            { font-size: 12px; color: #ffffff; background-color: #c0c0c0; padding: 4px; }
.progressdone a:link, .progressdone a:visited 
                        { font-size: 12px; color: #ffffff; background-color: #ffcc00; padding: 4px; color: #ffffff; 
                        text-decoration: none; }
.progressdone a:hover   { color: #ffcc00; background-color: #ffffff; }
.cartbutton  		    { padding: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; 
                        color: #ffffff; background-color: #009900; border: 1px solid #009900; }
.cartbutton:hover 	    { color: #ff9900; background-color: #ffffff; border: 1px solid #ff9900; }
.cartbutton:focus	    { border: 1px solid #009900; color: #009900; border: 1px solid #009900; }