/****************************************** Clear elements fix  ***************************************/

.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {
    display:inline-block;
}
.clearfix {
    display:block;
}
* html .clearfix {
    height:1px;
}

/** Among other techniques used for this layout is the 'Holy Grail' (three columns, middle liquid). An excellent article on it can be found at www.alistapart.com/holygrail, then follow some important IE fix's in the comments. Regards to the author!**/ 


body {
  	min-width: 550px;  /* 2x LC width + RC width */
	margin: 0;
	padding: 0;
	font-size: 65%;
}

#wrapper {
  	padding-left: 180px;   /* LC fullwidth */
  	padding-right: 190px;  /* RC width +CC padding */
	overflow: hidden;
}

#wrapper .col {
	position: relative;
	float: left;
	padding-bottom: 20010px;  /* X + padding-bottom */
	margin-bottom: -20000px;  /* X */
}

#central {
	background-color: #FFF;
	width: 100%;
	padding: 10px 20px 0px;
	border-right:  1px solid #e4e4e4;
	border-top: 1px #e4e4e4 dashed; 
}

#left {
	background-color: #FFF;
	width: 159px;	 /* LC width */
	padding: 0 10px; /* LC padding */
	margin-left: -100%;
	left: 150px;  /* RC fillwidth for IE6*/
	border-top: 1px #e4e4e4 dashed; 
	border-right:  1px solid #e4e4e4; 
	
}

#right {
	background-color: #fff;
	width: 129px;			/* RC width */
	padding: 0 10px;		/* RC padding */
	margin-right: -190px;	/* RC fullwidth + CC padding */
	border-top: 1px #e4e4e4 dashed; 
	
}

#header {
	margin-bottom:  15px;
}

#footer {
	background-color: #fff;
	height: 70px;
	clear: both;
	position:  relative; 
	border-top:  1px solid #e4e4e4;
}

#wrapper > #left {

left: -220px;	 /* -(LC fullwidth +cc padding) */
}
/*******************************      Central Col     *******************************/




#freeWrap {
	display:  block;
	position: relative;
	padding: 10px;
	background-color:  #fefeed;
	border:  1px solid #d29353;
}


.expander  {
	display: block;
	position:  relative;
	bottom:  1px;
	float:  left;
	margin:  0 auto;
	background: #fffdd9 url("../images/expander.jpg") bottom right no-repeat;
	border-top: 1px solid #55340d;
	border-left: 1px solid #55340d;
	text-align:  center;
	color:  #55340d;
	font-family:  georgia, arial;
	font-size: 1.4em;
	text-decoration:  none;
	font-weight:  lighter;
	letter-spacing:  0.1em;
	padding:  5px;
}

.expanded {
	display:  block;
	padding: 10px;
	background: #fffdd9;
	border:  1px solid #55340d;

	
}



#wrapper #central #noJs {
		display: block;
		margin: 0 auto 20px;
		width: 600px;
		padding: 10px;
		position: relative;
		text-align: center;
		font: sans-serif;
		font-size: 1.5em;
		color: #4d231e;
		background: #d1b9cb;
		border: 1px solid #7b372f;

}

.moreInfo {
	border-bottom:  1px dotted;
	text-decoration:  none;
	color: #353535;
	font-family:  lucida, georgia, arial;
	font-weight:  normal;
	font-size:  1.2em;
	
	
}

#central .wiki {
	text-align:  center;
	font-size:  1.3em;
	font-family: lucida;
	font-weight:  bold;
	color:  #000;
	
}

.wiki a {
	text-decoration:  none;
	color:  #000;
}

.wiki a:hover {
	text-decoration:  underline;
}



#central h1 {
	display:  block;
	text-align:  center;
	color: #1d1d1d;
	min-height:  72px;
	font-weight:  bold;
	font-family:  arial;
	font-size:  4em;
	margin: 0;
}

#central h2 {
	color: #525252;
	font-family:  lucida, georgia, arial;
	font-weight:  normal;
	font-size: 2.3em;
	text-align: center;
}

.titleNo {
	color: #b72828;
	font-size: 1.7em;
}

.title {
	color: #2a7598;
	font-family:  lucida, georgia, arial;
	font-weight:  normal;
	font-size:  2em;
	padding:  0;
	margin:  0;
}

#free {
	
	color: #6bb149;
	font-family:  lucida, georgia, arial;
	font-weight:  normal;
	font-size:  1.6em;
	padding:  0;
	margin:  0;
}

#central #qt {
	text-align: center;
	display: block;
	padding: 10px;
	background: #ffd5b5;
	font-size: 1.2em;
}

#central #qt a{
	color: #487b32;
	text-decoration: none;
}

#central #qt a:hover{
	text-decoration: underline;
}



#central #freeText {
	position: relative;
	color: #353535;
	font-family:  lucida, georgia, arial;
	font-weight:  normal;
	font-size:  1.5em;
	padding:  7px 0 0;
	margin:  0;
}

#splitLine {
	position:  relative;
	line-height: 1px;
	left:  20px;
	height: 1px;
	background:  #e4e4e4;
}

#innerSplit {
	display:  block;
	position: relative;
	line-height: 1px;
	right:  40px;
	height:  1px;
	background:  #e4e4e4;
	width:  40px;
}

#central #letsGo {
	text-align:  center;
	font-size: 3.5em;
	font-family:  lucida, georgia;
	margin:  0;
	padding:  0;
	color:  #b72828;
	
}

#central p {
	color: #353535;
	font-family:  lucida, georgia, arial;
	font-weight:  normal;
	font-size:  1.3em;
	padding:  7px 0 0;
	margin:  0;
}



#tone {
	background:   url("../images/tone.jpg") top left no-repeat;
	float:  left;
	width:  159px;
	padding: 214px 0 0;
	margin: 20px;
}

#bass {
	background:   url("../images/bass.jpg") top left no-repeat;
	float:  left;
	width:  159px;
	padding: 214px 0 0;
	margin: 20px;
	
}

#slap {
	background:   url("../images/slap.jpg") top left no-repeat;
	float:  left;
	width:  159px;
	padding: 214px 0 0;
	
	margin: 20px;
	
}

.spacer {
	height:  1px;
	clear:  both;
}

#soundBofxOne {
	float: left;
	display: block;
	margin: 56px 0 0  27px;
	width: 38px;
	height: 37px;
}

.soundfBox {
	display: block;
	width: 38px;
	height: 37px;
	margin: 56px 0 0  27px;
	
}



/***************      Tables     ***************/

#central table {
	margin:  20px 0 0 20px;
	text-align:  center;
	font-family:  verdana;
	border-collapse:  collapse;
}

#central #slapTable {
	font-size: 1.3em;
	margin-bottom: 13px;
}	

#central table th,td {
	padding:  5px;
	width: 48px;
	border-top:  1px solid #55340d;
	border-bottom:  1px solid #55340d;
	border-left:  1px solid #55340d;
	border-right:  1px solid #55340d;	
}

#central table th {
	background:  #d2eaed;
}

#central #rightTable {
	font-weight:  bold;
	color:  #b72828;
	padding: 5px;
	margin:  0;
}

#central #leftTable {
	font-weight:  bold;
	color:  #44b73c;
	padding:  5px;
	margin:  0;
	
}

#central .fourFour {
	font-size:  1.3em;
	margin-left:  0;
	padding-left:  0;
}

#central .fourFour td {
	padding:  5px 0;
	width: 35px;
}	

.clear {
	background:  #d2eaed;
}

/*******************************      Left Col     *******************************/




#left p {
	
	color:  #bbbbbb;
}


/*******************************      Right Col     *******************************/



#right p {
	
	color:  #bbbbbb;
}

/*******************************      Header     *******************************/

#logoImage {
	margin: 50px 0 0 10px;
}



#list  {
	margin: 0;
	padding: 0;
	margin-top:  40px;
	padding-top: 9px;
	list-style: none;
	text-align: right;
}

#list li {
	padding:  1px 12px 2px 0px;
}

#list a {
	text-decoration:  none;
	color:  #000;
	font-size: 1.6em;
}

#list a:hover {
	text-decoration:  underline;
	
}

#headerRep {
	background: url('../images/possibles/headerRep.jpg') top right repeat-x;
	height: 125px;
	padding-top: 2px;
}
#jag {
	background: url('../images/possibles/headerBit.gif') top right no-repeat;
	height: 125px;
	margin-right: 200px;
	
}

#list {
	display: block;
	float: right;
	margin-right: 10px;
	margin-top: 45px;
}
/*******************************      Footer and advert css     *******************************/

#valid {
	margin: 0 auto;
	width: 100px;
}


#genTop {
	background: #cfe5ff  url("../images/gen2.jpg") top left no-repeat;
	width: 869px; 
	height: 397px;
	margin:  20px auto 0;
	position: relative;
	padding-top: 110px;
}

.googleLinkNest {
	width: 729px;
	height: 16px;
	margin: 20px auto 0;
}

.leaderboard {
	width: 468px;
	height: 60px;
	margin: 0;
	padding: 0;
	margin-bottom: 26px;
}

.rightColSpacer {
	height: 520px;
	width: 120px;
}

.miniSplit {
	width: 120px;
	height: 135px;
	
}


.rightColSpacerTwo {
	height: 790px;
	width: 120px;
}

.leftColSpacer {
	width: 120px;
	height: 1010px;
}

.oneThirtyFive {
	width: 160px;
	height: 135px;
}

.leftMiniSplit {
	width: 160px;
	height: 385px;
}

.leftReferNest {
	width: 121px;
	height: 241px;
	margin: 0 auto;
}

.marginTwenty {
	margin-left: 20px;
}

#amazonDvd {
	width: 120px;
	height: 250px;
}

#amazonFooter {
	width: 468px;
	height: 60px;
	margin: 0 auto 20px;
}

#subtleAmazon {
	display: block;
	color: #349933;
	font-family:  lucida, georgia, arial;
	font-weight:  normal;
	font-size:  1.6em;
	text-decoration: none;
	margin-bottom: 0px auto 11px;
	text-align: center;
}

#subtleAmazon:hover {
	text-decoration: underline;
}

#scoreNest {
	width: 800px;
	margin: 0 auto;
	text-align:  center;
}

#scoreNotation{
	padding-top: 12px;
	margin-bottom: 10px;
}

#standard{
	margin-top: 10px	;
}

#genBottom {
	background: #cfe5ff url("../images/genAnchor.jpg") top left no-repeat;
	width: 846px;
	height: 12px;
	margin:  10px auto;
	
}

/******** Tables ********/



#footer #genTop  table {
	margin-left: 186px;
	padding:0;
	font-family:  verdana;
	border-collapse:  collapse;
}

#footer #genTop table th,td{
	width: 29px;
	padding: 5px 0;
	margin: 0;
	text-align: center;
	font-size: 1em;
	border: none;
	border-top:  1px solid #55340d;
	border-bottom:  1px solid #55340d;
	border-left:  1px solid #55340d;
	border-right:  1px solid #55340d;
}

.genTableOne{
	margin-top: 41px;
}

.genTableTwo{
	margin-top: 52px;
}

.genTableThree{
	margin-top: 52px;
}

#footer .fourFour {
	margin: 0 auto;
	border-top:  1px solid #55340d;
	border-bottom:  1px solid #55340d;
	border-left:  1px solid #55340d;
	border-right:  1px solid #55340d;
	text-align:  center;
	font-family:  verdana;
	border-collapse:  collapse;	
}

#footer .fourFour td {
	padding:  5px 0;
	width: 35px;
}
	


/***************      Form (positioned absolutely after a firefox headache)    ***************/

.genButtons {
	width:  13px;
	height:  13px;
	padding: 0;
	margin: 0;
}

#firstBut {
	position: absolute;
	left: 128px;
	top: 185px;
}

#secondBut {
	position: absolute;
	left: 128px;
	top: 263px;
	
}

#thirdBut {
	position: absolute;
	left: 128px;
	top: 343px;
}

#fithBut {
	position: absolute;
	right: 145px;
	top: 185px;
}

#sixthBut {
	position: absolute;
	right: 145px;
	top: 263px;
}

#seventhBut {
	position: absolute;
	right: 145px;
	top: 343px;
}

#createBut {
	position:  absolute;
	left: 315px;
	top: 397px;
}

#hearButLeft {
	position: absolute;
	left: 46px;
	top: 383px;
}

#hearButRight {
	position: absolute;
	right: 62px;
	top: 383px;
}



/*******************************      Not forgetting the IE fix's...     *******************************/




