body { font-family: "Forum Regular", "Garamond", serif; font-size: 14pt;  overflow: auto; }
overlay { display: none; }
code { color: #255dc7; }

header .container-fluid { margin: 0; padding: 0 0; }

#top { background-color: #f7f6f3; border-radius: 0;  }
#top.navbar { border-radius: 0; }


blockquote { font-style: italic; }

.panel-body { background: rgba(255,255,255, 1); }
.container-fluid { padding: 0; }

#container { background: rgba(250,253,255, 0.6);  margin: 0; padding: 0;}

#header { padding-bottom: 16px; }
.panel-default > .panel-heading { background: inherit; border:none; }

.loading { background-color: rgba(255, 255, 255, .75); background-image: url(images/spiffygif_142x142.gif); 
background-repeat: no-repeat; background-position: center; }

ul.bulleted li { list-style: inside decimal; border-bottom: 1px dotted gray; margin-bottom: 1em; }
    
.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
 }

.eighty-wide {
	margin: auto;
    padding: 24px 12px;
    width: 98%;
    background: white;
}

.my-account {
	background: palegreen;
}

.my-account li { border-bottom: 1px solid #90e090; }

footer { 	position: absolute;  bottom: 0; }


.midiHogg-banner {
	height: 54px;
	background-size: contain;
	background-position-x: left;
	background-color: yellowgreen;
	border-bottom: 1px solid gray;
	text-align: center;
	margin-bottom: 1em;
}


  
.midiHogg-logo {
	height: 80px;
	border: 1px solid gray;
	box-shadow: 1px 2px 3px darkseagreen;
}

.wide { margin: 0 2em;	}
.wide-margins { margin: 1em 8em; }
.tall { margin: 24px 0px; padding: 12px; }

#home-content { overflow: auto; padding-bottom: 2em; }
#content { margin-top: 60px; }
#container {
/*
	background: linear-gradient(45deg, white 20%, #aaf 80%);
	background-size:100%;
	padding: 1em;
	* */
}

#home-menu li.trigger a { display: inline-block; }

#home-tiles { width: 96%; }

#latest { padding: 4px 60px; border-radius: 8px 0 2px; margin: 0 4em; background: white; }

#current_action { display: none; }

.checks {
    border-radius: 3px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.24);
    color: #626262;
    margin-top: 50px;
    padding: 30px;
}

.checks .success::before {    content: "✓"; }

.django-logo { 
	background-image: url("images/Django-icon-36px.png"); 
	background-repeat: no-repeat; padding-left: 20px;
	background-position: left; background-size: 20px;   
}

a.screenshot img { width: 64px; cursor: pointer; }
 
.panel-body .white { background: transparent; }

a.donation { color: white; font-weight: bold; }

#image-form { width: 700px; }

.inset { float: left; margin: 1em; }

.banner-image { width: 100%; z-index:-1; }

.bordered { border: 1px solid gray; border-radius: 12px; }
.cartouche { padding: 12px 24px; clear: both; margin-top: 1em; }
.lavender { background: lavender; }

.ogg-player { height: 24px; float: right; }

.actions { margin: 1em; }
.actions h3 { display: none; }
.centered { text-align: center; }
.fatty { margin: 2em; padding: 2em; }
.skinny { margin: 0; padding: 0; }
.tip { background: gainsboro; z-index: 999; box-shadow: 1px 2px 3px gray; }

.blue-paper { 
    background-color: gainsboro;
    background-image: linear-gradient(white 2px, transparent 2px), 
    linear-gradient(90deg, rgba(240,240,240,0.81) 2px, transparent 2px), 
    linear-gradient(rgba(235, 235, 235, 0.3) 1px, transparent 1px), 
    linear-gradient(90deg, rgba(245, 245, 245, 0.3) 1px, transparent 1px);
    background-image: -webkit-linear-gradient(white 2px, transparent 2px), -webkit-linear-gradient(0deg, white 2px, transparent 2px), -webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), -webkit-linear-gradient(0deg, rgba(255,255,255,.3) 1px, transparent 1px);
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
	border-radius: 8px;
}

.page_navigation { background: lightgray; }

.tablature-bg { background: rgba(250,255,250, .5); background-image: url(/css/images/tablature.png); background-position: center left; background-repeat: no-repeat; height: 120px; }


.notation-bg { 	margin-left: 100px; 
				background: rgba(250,255,250, .5); 
				background-image: url(/css/images/colored_tablature.png); 
				background-position: top left; 
				background-repeat: no-repeat; 
				height: 130px; 				
				transition: all 1s;
				-moz-transition: all 2s;
		}
				
.notation-bg:hover {
				background-position: bottom left;
				transition: all 1s;
				-moz-transition: all 2s;
				-webkit-transition: all 2s;
  }
  
.tablature-bg { background-position: bottom left; }


/*
.fade {
   opacity: .5;
   font-weight: normal;
   transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }
   
.fade:hover {
	opacity: 1;
	color: red;
}

}
*/
   
 
 #screenshot { 	
	display: none; 
	background: #eff; 
	width: 200px; height: 800px; 
	position: absolute; top: 100px; left: -6000px; 
	z-index: 999;
	box-shadow: 3px 3px 12px black; 
 }
 
.offset-image { float: left; margin: 1em; }


label {  text-align: right; 
  margin-right: 1em; 
  width: 150px;
  background: #edf0ff;
  border: black solid 1px;
  padding-left: 1em;
  padding-right: 1em;
}

}
.label-long { width: auto; }
.submit input[type="submit"] { 
	padding: 6px 22px; 
	background: none repeat scroll 0 0 rgba(190, 250, 150, 0.8); 
	margin: 1em; font-size: 16px; border-radius: 4px; 
	text-shadow: 1px 0 1px gray; 
	width: auto;
}

.submit input[type="submit"]:hover { text-shadow: 1px 0 1px gray; box-shadow: 2px 2px 4px #987; background: rgba(140, 200, 100, 1); }
.pagination { width: 100%; }
.submit-wrapper { width: 100%; background-color: rgba(240,240,240, 05); margin-top: 1em; }
.checkbox { padding-left: 60px; }
.textarea > .mce-panel { margin-bottom: 12px; }


ul.ui-autocomplete .ui-menu-item {
	font-size: 12px;
	border-bottom: 1px dotted gray;
}
.autocomplete { width: 100%; clear: both; }
.autocomplete .submit, .autocomplete  .input { float: left; padding-right: 12px; }
.autocomplete .submit input[type="submit"] { margin: -4px 10px; }

#score { overflow: auto; }
.auto-score { background: url(images/icons/music-notes.png); background-repeat: no-repeat; padding: 6px 0 6px 40px; overflow: auto; }

#score-menu ul { padding: 3px 12px 1px; margin-top: 1em; background: lavender; }

#score-menu ul li { 
background: #fefefe; border: 1px solid #dde; 
margin-right: 2px; border-radius: 12px 0 8px 0 ; 
padding: 10px 16px; font-weight: bold;
}

.track-score-menu ul > li { padding: 0 12px; }

#close-notation:after { content: "*"; }

.more-help { display: none; }
.more-help h4 { font-weight: bold;  }

#comment { width: 700px; position: relative; }
.right-nav li { border-bottom: 1px solid #f4f4f4; padding: 4px 12px; }
.right-nav > li > a { color: #5f8f7f; }

.no-display { display: none; }

.button + b-close, .button.bClose {
    border-radius: 7px;
    box-shadow: none;
    font: bold 131% sans-serif;
    padding: 0 6px 2px;
    position: absolute;
    right: -7px;
    top: -7px;
}
 
.button + b-close > span { font-size: 84%; }

.button + b-close  {
    background-color: #2b91af;
    border-radius: 10px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
}
.button.small {
    border-radius: 15px;
    float: right;
    margin: 22px 5px 0;
    padding: 6px 15px;
}
.button + b-close :hover {
    background-color: #1e1e1e;
}


/* social media */
.social-media li a span:first-child { 
	background-image: url(images/icons/social-media.png);
	background-repeat: no-repeat;	
	height: 48px;
	width: 48px;
	line-height: 48px;
	font-size: 14px;
	padding: 8px 0 8px 48px;
}

.toggle-up, .toggle-down {
	background-image: url(images/icons/down-arrow.png);
	background-repeat: no-repeat;	
	background-position: 99% center;
}

.toggle-up {
	background-image: url(images/icons/up-arrow.png);
}


.facebook 	{ background-position: 2px -4px; }
.skype 		{ background-position: -285px -86px; }
.rss 		{ background-position: -245px -86px; }
.reddit 	{ background-position: -204px -86px; }
.twitter 	{ background-position: -367px -86px; }
.vimeo 		{ background-position: -327px -86px; }
.google-plus { background-position: -327px -48px; }
.web 		{ background-position: 2px -128px; }
.wordpress 	{ background-position: -122px -127px; }
.pinit 		{ background-position: -82px -127px; }
.linkedin 	{ background-position: -38px -86px; }
.youtube 	{ background-position: -204px -127px; }

.document-image { max-width: 90%; margin: auto; }

.next_page { 	float: right; 	}
	
.next_page:after {	
	font-family: 'Glyphicons Halflings';
	content:  " \e258"; 
	}

.previous_page:before {
	font-family: 'Glyphicons Halflings';
	content: "\e257  ";
}


#pages div.select select { 	max-width: 800px; }


.captioned {
    border: 1px dotted gray;
    margin-bottom: 24px;
    overflow: auto;
    position: relative;
}

.captioned > h4 {
    margin: 0 0 20px;
    padding: 14px 24px;
}
.captioned  h3, h2 {
	font-weight: bold;
	border-bottom: 1px solid lightgray;
	margin: auto;
	text-align: left;
	padding: 4px; 
	padding-bottom: 20px;
}

.captioned div p { padding: 4px; }

.captioned > div { 	 
	padding: 12px 24px;
	clear: both;
	margin-top: 0em;
}

.captioned p.bottom-pop {
	display: none;
	bottom: 0;
	background: #f6f6e2;
}

.captioned:hover p.bottom-pop { display: block; }
.captioned a.visit-me { position: absolute; right:0; top: 0px; margin: 0; padding:0; }
.captioned a.visit-me:hover { box-shadow: 1px 3px 5px #b0a0a0; }

.dl-horizontal dd { border-bottom: 1px dotted lightgray; }

.long-text { padding: 12px 24px; }


/* ----------------------------------------- */
div.horizontal-menu {
    position: absolute; 	/* fixed; /* Sit on top of the page content */
    display: none; 			/* none;  Hidden by default */
    width: 	600px; 			/* 100%;  Full width (cover the whole page) */
    height: 400px; 			/* 100%;  Full height (cover the whole page) */
    top: 0;
    left: 100%;
    top: -100%;
    margin: auto;
    background: transparent;
    z-index: 9999; 			/* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; 		/* Add a pointer on hover */
}

div.horizontal-menu div {
	width: 45%;
	margin: 2%;
	border: 1px solid lightgray;
	display: inline-block;
	background: rgba(250, 250, 255, 1);
}

div.horizontal-menu div ul {
margin-bottom: 1em;
list-style: none;
}

div.horizontal-menu div ul li {
border-bottom: 1px dotted lightgray;
}

div.horizontal-menu div h4 {
	margin: 0;
	padding: 0;
	background-color: rgba(188, 217, 236, 0.5);
	font-size: 12px;
    line-height: 1.42857143;
    color: #777;
    white-space: nowrap;
    font-weight: bold;
    margin-bottom: 1em;
	padding: 4px;

}

/** Paging **/
.pager .prev  { float: left; }
.pager .next  { float: right; }
.pager .current {
	background: #efefef;
	color: #c73e14;
}

.pager {
	background:#fff;
	color: #ccc;
	margin-top: 1em;
	clear:both;
	padding: 4px;
}

.pager .current,
.pager .disabled,
.pager a {
	text-decoration: none;
	padding: 5px 8px;
	display: inline-block;
	padding: 2px; 
}

.paging > span {
	display: inline-block;
	border-left: 1px solid #ccc;
		padding: 4px;

}

.pager > span:hover {
	background: #efefef;
	box-shadow: 1px 2px 3px gray;
}

.paging .prev {
	border-left: 1px solid #ccc;
	-webkit-border-radius: 4px 0 0 4px;
	border-radius: 4px 0 0 4px;
}

.paging .next {
	-webkit-border-radius: 0 4px 4px 0;
	border-radius: 0 4px 4px 0;
}
.paging .disabled {
	color: #ddd;
}
.paging .disabled:hover {
	background: transparent;
}
.paging .current {
	background: #efefef;
	color: #c73e14;
}

.view-comments div { 
border-left: 1px blue solid;
}
.view-comments div p {
background: #eeeff0;
}

div.collection-description {
	margin: 1em;
	padding: 1em;
	background: #fdfdff;
}

#facsimile-image img { margin: 1em auto; border: 2px gray solid;}

#facsimile-image {
    position: fixed; 	/* Sit on top of the page content */
    display: none; 		/* Hidden by default */
    width: 100%; 		/* Full width (cover the whole page) */
    height: 100%; 		/* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
    text-align: center;
}
    
#group-tiles { background: whitesmoke; overflow: auto; margin-bottom: 48px;}

#group-tiles > div { 
	width:24%; float: left; border: 1px dotted gray; text-align: center; 
	margin-right: 1%; position: relative; height: 350px; overflow: hidden;
	background: white;
	margin-bottom: 12px;
}

#group-tiles > div div { position: absolute; bottom: 0; }

#group-tiles > div > a > img { max-height: 250px; }

/* 
 *::before, *::after { box-sizing: border-box; } 
*/