
#HeaderFrame{
	width: 100%; 
	overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
	background-repeat:repeat;
	display:block;
}

#MainFrame{
	width: 100%; 
	background-repeat:repeat;
	display:block;
	overflow:auto;
}

#MainFrame{
}

body{
    font-family: 'Reenie Beanie', cursive;
	background-image:url('images/background.jpg');
    font-size: 180%;
	margin: 0;
	padding: 10px;
	border: 0;
	overflow: scroll;
}

img {
    max-width: 100%;
    max-height: 100%;
}
h1 {
    text-decoration: underline;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}
h2 {
    text-decoration: underline;
    margin-top: 0.6em;
    margin-bottom: 0.6em;
}
h3 {text-decoration: underline;}


a:link {color: #005489;}        /* unvisited link */
a:visited {color: #35007e;}   /* visited link */
a:hover {color: #005489;
text-shadow: 0 0 3px #048de3;}   /* mouse over link */
a:active {color: #005489;}     /* selected link */

.coffeestain{
    background-image:url('images/coffeestain.png');
    position: absolute;
    left: 600px;
    top: 30px;
    width: 234px;
    height: 200px;
    z-index: -1;
}

/* ------------------------------- Post stuff  -------------------------------*/
.post{	
	background-image: url("images/mountingpaper.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position:top;     
    box-shadow: 5px 10px 20px #846b4e;
    max-width: 700px;
    overflow:auto;
    display: inline-block;
}

.postfull{
    width: 95%;
    padding: 30px;
    padding-left: 120px;
    margin: 10px;
}
.postsmall{
    width: 25%;
    padding: 10px;
    padding-left: 90px;
    margin: 5px;
    font-size: 60%;
    min-height: 300px;
}

.cartoon{
	height:auto;
	float:left;
    margin: 10px;
    box-shadow: 7px 7px 20px #846b4e;
}
.cartoontext{
}
.invisible {
    display: none;
    visibility: hidden;
}
form p label {
	display:block;
	float:left;
	width:200px;
}
form p input {
    width:250px;
}
.clearspacer{
    clear:both;
}

.aboutwrapper{	
	background-image: url("images/aboutback.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 700px;
    padding: 90px;
    padding-top: 30px;
    margin: 10px;
    overflow:auto;
}
.shopwrapper{	
	background-image: url("images/shopback.png");
    background-size:100% 100%;
    padding: 100px;
    padding-top: 20px;
    margin: 10px;
    overflow:auto;
}
.shoplist{
    display: inline-block;
    width: 400px;
    vertical-align: middle;
}

/* ------------------------------- UL stuff  -------------------------------*/
.clear {
    content: '';
    display: block;
    clear: both;
}
ul#header_menu {
height: 80px;
margin: 0px;
list-style: none;
}
ul#header_menu li a { 
display: block;
float: left; 
height: 80px;
margin-right: 10px;
background-image:url('images/headerbuttons.png');
text-indent: -9999px;
}

	ul#header_menu li a.home	{width: 140px; background-position: 0 0;}
	ul#header_menu li a.about	{width: 140px; background-position: -140px 0;}
	ul#header_menu li a.search	{width: 150px; background-position: -280px 0;}
	ul#header_menu li a.shop	{width: 110px; background-position: -430px 0;}
		ul#header_menu li a.home:hover		{width: 140px; background-position: 0 -80px;}
		ul#header_menu li a.about:hover		{width: 140px; background-position: -140px -80px;}
		ul#header_menu li a.search:hover	{width: 150px; background-position: -280px -80px;}
		ul#header_menu li a.shop:hover		{width: 110px; background-position: -430px -80px;}


ul#search_medium{
margin: 0px;
margin-left: 100px;
height: 200px;
width: 235px;
padding: 0px;
list-style: none;
box-shadow: 5px 10px 20px #846b4e;
border-radius:25px;
}
ul#search_medium li a { 
display: block;
float: left;
background-image:url('images/searchmedium.png');
text-indent: -9999px	
}
	ul#search_medium li a.paint		{width: 145px; height: 95px; background-position: 0 0;}
	ul#search_medium li a.pen		{width: 90px; height: 95px; background-position: -145px 0;}
	ul#search_medium li a.pencil	{width: 235px; height: 105px; background-position: 0 -95px;}
		ul#search_medium li a.paint:hover		{width: 145px; height: 95px; background-position: -235px 0;}
		ul#search_medium li a.pen:hover		    {width: 90px; height: 95px; background-position: -379px 0;}
		ul#search_medium li a.pencil:hover		{width: 235px; height: 105px; background-position: -235px -95px;}

ul#search_tags{
margin: 10px;
height: 663px;
width: 710px;
padding: 0px;
list-style: none;
box-shadow: 5px 10px 20px #846b4e;
border-radius:25px;
}
ul#search_tags li a { 
display: block;
float: left;
background-image:url('images/searchtags.jpg');
text-indent: -9999px;
}
	ul#search_tags li a.sheetmusic {width: 270px; height: 140px; background-position: 0 0;}
	ul#search_tags li a.conductor  {width: 200px; height: 140px; background-position: -270px 0px;}
	ul#search_tags li a.piano	   {width: 230px; height: 140px; background-position: -470px 0px;}
	ul#search_tags li a.movies     {width: 300px; height: 170px; background-position: 0 -140px;}
	ul#search_tags li a.clarinet   {width: 180px; height: 170px; background-position: -300px -140px;}
	ul#search_tags li a.violin	   {width: 220px; height: 170px; background-position: -480px -140px;}
	ul#search_tags li a.military   {width: 170px; height: 160px; background-position: 0 -310px;}
	ul#search_tags li a.oboe       {width: 180px; height: 160px; background-position: -170px -310px;}
	ul#search_tags li a.trumpet    {width: 170px; height: 160px; background-position: -350px -310px;}
	ul#search_tags li a.cello      {width: 180px; height: 160px; background-position: -520px -310px;}
	ul#search_tags li a.locations  {width: 200px; height: 180px; background-position: 0 -470px;}
	ul#search_tags li a.bassoon    {width: 150px; height: 180px; background-position: -200px -470px;}
	ul#search_tags li a.trombone   {width: 170px; height: 180px; background-position: -350px -470px;}
	ul#search_tags li a.doublebass {width: 180px; height: 180px; background-position: -520px -470px;}
	ul#search_tags li a.sport      {width: 330px; height: 112px; background-position: 0 -650px;}
	ul#search_tags li a.flute      {width: 370px; height: 112px; background-position: -330px -650px;}
	ul#search_tags li a.saxophone  {width: 350px; height: 165px; background-position: 0 -762px;}
	ul#search_tags li a.percussion {width: 350px; height: 165px; background-position: -350px -762px;}


    ul#search_tags li a.sheetmusic:hover {width: 270px; height: 140px; background-position: -700px 0;}
	ul#search_tags li a.conductor:hover  {width: 200px; height: 140px; background-position: -970px 0px;}
	ul#search_tags li a.piano:hover	     {width: 230px; height: 140px; background-position: -1170px 0px;}
	ul#search_tags li a.movies:hover     {width: 300px; height: 170px; background-position: -700px -140px;}
	ul#search_tags li a.clarinet:hover   {width: 180px; height: 170px; background-position: -1000px -140px;}
	ul#search_tags li a.violin:hover	 {width: 220px; height: 170px; background-position: -1180px -140px;}
	ul#search_tags li a.military:hover   {width: 170px; height: 160px; background-position: -700px -310px;}
	ul#search_tags li a.oboe:hover       {width: 180px; height: 160px; background-position: -870px -310px;}
	ul#search_tags li a.trumpet:hover    {width: 170px; height: 160px; background-position: -1050px -310px;}
	ul#search_tags li a.cello:hover      {width: 180px; height: 160px; background-position: -1220px -310px;}
	ul#search_tags li a.locations:hover  {width: 200px; height: 180px; background-position: -700px -470px;}
	ul#search_tags li a.bassoon:hover    {width: 150px; height: 180px; background-position: -900px -470px;}
	ul#search_tags li a.trombone:hover   {width: 170px; height: 180px; background-position: -1050px -470px;}
	ul#search_tags li a.doublebass:hover {width: 180px; height: 180px; background-position: -1220px -470px;}
	ul#search_tags li a.sport:hover      {width: 330px; height: 112px; background-position: -700px -650px;}
	ul#search_tags li a.flute:hover      {width: 370px; height: 112px; background-position: -1030px -650px;}
	ul#search_tags li a.saxophone:hover  {width: 350px; height: 165px; background-position: -700px -762px;}
	ul#search_tags li a.percussion:hover {width: 350px; height: 165px; background-position: -1050px -762px;}


	

/* ------------------------------- Sharelinks stuff  -------------------------------*/

.sharelinkbox {
    font-size: 28px;
	max-height: 30px;
	max-width: 120px;
	overflow: hidden;
	transition: max-height 0.8s;
    padding: 0px;
    margin: 0 auto;
    text-align: center;
    padding-top: 10px;
}
.sharelinkboxclicked{
	/* On hover, set the max-height to something large. In this case there's an obvious limit. */
	max-height: 400px;
	max-width: 600px;
}
.sharelinkbox a{
    font-size: 18px;
}

ul.sharebar{
margin: 0px;
margin-left: 70px;
list-style: none;
height: 48px;
}

ul.sharebar li a { 
display: block;
float: left; 
height: 48px;
margin: 10px;
margin-bottom: 30px;
background-image:url('images/sharebar.png');
text-indent: -9999px;
}
	ul.sharebar li a.twitter   {width: 47px; background-position: 0px 0px;}
	ul.sharebar li a.facebook  {width: 45px; background-position: -47px 0px;}
	ul.sharebar li a.google    {width: 45px; background-position: -93px 0px;}
	ul.sharebar li a.reddit    {width: 47px; background-position: -137px 0px;}
	ul.sharebar li a.pinterest {width: 42px; background-position: -184px 0px;}
		ul.sharebar li a.twitter:hover		{width: 47px; background-position: 0px -50px;}
		ul.sharebar li a.facebook:hover		{width: 45px; background-position: -47px -50px;}
		ul.sharebar li a.google:hover		{width: 45px; background-position: -93px -50px;}
		ul.sharebar li a.reddit:hover		{width: 47px; background-position: -137px -50px;}
		ul.sharebar li a.pinterest:hover	{width: 42px; background-position: -184px -50px;}