html {
    height: 102%;
  }

	body {
		margin-top: 4px;
    margin-left: 16px;
    margin-right: 16px;
		padding: 0;
		padding-bottom: 16px;
		border:0;     /* This removes the border around the viewport in old versions of IE */
	  font-family: Century Gothic, sans-serif;
	  background-color: #BBBBDD;
	}

  /* Header styles */
  #header {
    clear:both;
    float:left;
    width:100%;
  }

  /* column container */
  .colmask {
    position:relative;    /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
    clear:both;
    float:left;
    width:100%;       /* width of whole page */
    overflow:hidden;    /* This chops off any overhanging divs */
    margin-top: 16px;
  }
  
  .holygrail {
    min-height: 768px;
  }

  .holygrail .colmid {
    float:left;
    width:200%;
    margin-left:-170px;   /* Width of right column */
    position:relative;
    right:100%;
  }
  
  .holygrail .colleft {
    float:left;
    width:100%;
    margin-left:-50%;
    position:relative;
    left:340px;           /* Left column width + right column width */
  }
  .holygrail .col1wrap {
    float:left;
    width:50%;
    position:relative;
    right:170px;          /* Width of left column */
  }
  .holygrail .col1 {
    margin-left: 180px;
    margin-right: 180px;
    /* Centre column side padding:
                              Left padding = left column width + centre column left padding width
                              Right padding = right column width + centre column right padding width */
    position:relative;
    left:200%;
    overflow:hidden;
  }
  .holygrail .col2 {
    float:left;
    float:right;      /* This overrides the float:left above */
    width:160px;          /* Width of left column content (left column width minus left and right padding) */
    position:relative;
    right:5px;           /* Width of the left-had side padding on the left column */
  }
  .holygrail .col3 {
    float:left;
    float:right;      /* This overrides the float:left above */
    width:160px;          /* Width of right column content (right column width minus left and right padding) */
    margin-right:15px;    /* Width of right column right-hand padding + left column left and right padding */
    position:relative;
    left:50%;
  }
  /* Footer styles */
  #footer {
    clear:both;
    float:left;
    width:100%;
    font-size: smaller;
    margin-top: 8px;
    padding: 8px;
    text-align: right;
  }

	/* Header styles */
	#header {
	  margin-top: 12px;
	  font-family: Century Gothic, sans-serif;
	  border: 1px solid #333399;
	  background-color: #ccccff;
	  border-radius: 8px;
	}
	#headerline1 {
	  padding-left: 16px;
	  padding-top: 16px;
	  font-size: 20pt;
	}
	#headerline2 {
	  padding-left: 16px;
	  padding-bottom: 16px;
	  font-size: 16pt;
	}

	
	
	/* Globals */
	button, table, select, input {
	  font-family: Century Gothic, Verdana, Helvetica, Arial, sans-serif;
	  font-size: 11pt;
	}
	a {
	  text-decoration: none;
	}
	button {
	  background-color: #BBBBDD; 
	}
	
	/* Searchbar */
	a.firstletter {
	  cursor: pointer;
	}
	div.navbar {
	  text-align: left;
	  margin-top: 4px;
	  margin-left: 4px;
	  margin-bottom: 4px;
	}
	div.searchbox, div.firstletters {
	  padding: 2px;
	}
	
	
	/* Sidebar */
	div.sidebar {
	  font-weight: bold;
	  margin: 5%;
	}
	div.google-ad {
	  text-align: center;
	}
  div.pw-ad {
    padding: 8px;
    background-color: #bbbbdd;
    border: 1px solid #aaaacc;
    border-radius: 8px;
  }	
	
	/* Search results */
	div.maincontent {
	  padding-top: 1%;
	  padding-left: 2%;
	  padding-right: 2%;
	  padding-bottom: 1%;
	}
	div.srcdiv {
	  padding-top: 1%;
	  padding-bottom: 3%;
	  background-color: #CCCCEE;
	}
	div.srctitle {
	  font-size: larger;
	  padding-bottom: 6px;
	  padding-left: 4px;
	  margin-top: 4px;
	  cursor: pointer;
	  background-color: #BBBBDD;
	}
	div.song {
	  padding-bottom: 6px;
	}
	div.songtitle {
	  font-weight:bold;
	  margin-left:3%;
	}
	div.extlink {
	  margin-left:6%;
	}
	div.transcriber {
	  margin-left:6%;
	}
	div.filelinks {
	  margin-left:12%;
	}
	span.highlight {
	  background-color: #FFFF00;
	}
	
	
	/* News */
	div.newsdiv {
	  padding-top: 1%;
	  padding-bottom: 1%;
	  padding-left: 1%;
	  padding-right: 1%;
	}
	.newstopbar {
	  font-size: larger;
	  font-weight: bold;
	  margin-top: 8px;
    margin-bottom: 8px;
	}
	
	/* sidebar-right */
	div.sidebarheader {
	  font-weight: normal;
	  padding: 2%;
	  background-color: #AAAAFF;
	}
	div.sidebaritem {
	  font-weight: normal;
	  padding: 5%;
	  background-color: #BBBBEE;
	}
	div.sidebar {
    font-size: 10pt;
	}
	
	/* Tables */
	
	tr.header {
	  background-color: #AAAACC;
	  text-align: center;
	}
	
	tr.odd {
	  background-color: #BBBBDD;
	}
	
	tr.even {
	  background-color: #DDDDFF;
	}
	
	#sidebar-left, #sidebar-right {
    border: 1px solid #333399;
    background-color: #ccccff;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 8px;
	}
	
	#navbar {
    border: 1px solid #333399;
    background-color: #ccccff;
    padding: 8px;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 12px;
    border-radius: 8px;
	}
	
	.bluebox {
    border: 1px solid #333399;
    background-color: #ccccff;
    border-radius: 8px;
    padding: 8px;
	}
	
	hr {
	 color: #9999cc;
	 background-color: #9999cc;
	 border: none;
	}
	
	.bronze {
    background-color: #bf551c;      
		display:inline-block;
	}
	.bronze2 {
    background-color: #d88d50;
    position:relative;
	}
	
  .silver {
    background-color: #96A6AD;      
    display:inline-block;
  }
  .silver2 {
    background-color: #BFCBCC;
    position:relative;
  }

  .gold {
    background-color: #CEAF23;
    display:inline-block;
  }
  .gold2 {    
    background-color: #F2D557;      
    position:relative;
  }
  
  .top10 {
    text-align: center;
    display: inline-block;
    font-family: Century Gothic;
    font-size: 8pt;
    background-color: #ccccff;
    border: 3px solid #9999aa;
    padding-left: 8px;
    padding-right: 8px;
  }
  
  table.historytable {
    text-align:center;
    width:100%;
    border-collapse:collapse;
  }
  table.historytable > tbody > tr > td {
    text-align:center;
  }
  p.pl {
    display:none;
  }
  
  table.songtable > tbody > tr > td.c {
    text-align:center;
  }
  table.songtable > tbody > tr > td.p {
    padding-right:5px
  }