﻿body         { background-color: #424242; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif; font-size: 0.75em; 
               padding:0; margin:0; text-align:center; color: #FFFFFF; height:100%}
               
               
               
html, body, table, tr, td, th, div, span, p, br, h1, h2, h3, h4, h5, h6, {
color:#FFFFFF;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}            


* html body {height:100%}

div {font-size: 100%}
div img 	{display: inline}
.clear 		{ clear:both; line-height:0; height:0; font-size:0 }

.clearfix:after { content: ".";  display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


.hidden { 
	visibility: hidden; 
	font-size: 1px !important;
	padding: 0;
	margin: 0;
	height: 1px;
}



/* =================  TABLE BASED LAYOUT =================  */


.tframe 	{	width:770px;
				margin:10px auto 20px auto;
				padding:0px;
				border:0;
				cellspacing:0;
				cellpadding:0;
				font-size: 100%;
			}

.tdleft 	{	width:255px; 
				border-left:1px solid #C0C0C0;
				border-top:1px solid #C0C0C0;
				background: #2E2B25 url('http://www.tsyjo.com/images/bgr_band.jpg') no-repeat left bottom;
				vertical-align: top;
	    	}
	    	
.tdright	{	width:515px;
				padding:95px 0 0 0;
				border-right:1px solid #C0C0C0;
				border-top:1px solid #C0C0C0;
				background: #424242 url('http://www.tsyjo.com/images/headerw.jpg') no-repeat left top;
				vertical-align: top;
			}

.tdbot 		{	background: #424242 url('http://www.tsyjo.com/images/bgr_bot.jpg') no-repeat left bottom;
				border-right:1px solid #C0C0C0;
				border-left:1px solid #C0C0C0;
				border-bottom:1px solid #C0C0C0;
				height:39px;
				text-align:right;
				padding: 0 15px 0 15px;
				font-size: 78%;
				color: #5B5645;
			}



/* =================  DIV ELEMENTS =================  */

	#navig {
		text-align:left;
		margin:5px 0 20px 15px;
		font-size:85%;
		float:left;
		width:480px;
		}
		
	#txt-left {
		width:220px;
		margin:20px 0 20px 15px;
		float:left;
		text-align:left;
		font-size:90%;
		}
		
	#txt-right {
		width:225px;
		margin:20px 10px 20px 15px;
		float:right;
		text-align:left;
		font-size:90%;
		}
		
	#txt {
		width:480px;
		margin:10px 5px 20px 15px;
		float:left;
		text-align:left;
		}
		
	#letter {
		width:480px;
		margin:0 0 10px 0;
		padding: 20px 0 40px 0;
		border-bottom:1px dotted #E07E3A;
		float:left;
		text-align:left;
		}		
		

.mp3list {
    line-height: 160%;
}




/* =================  GENERAL STYLING =================  */

h1 {font-size: 185%; color: #9B9880; font-weight: bold; margin-bottom:30px}
h2 {font-size: 135%; color: #E07E3A; font-weight: bold; margin-top:25px}
h3 {font-size: 125%; color: #B2A01C; font-weight: bold}
h4 {font-size: 115%; color: #DD5A1F; font-weight: bold}
span.txt_xl { font-size: 140%; color:#D7BF3E}
span.txt_l {font-size: 115%;}
span.txt_lgr {font-size: 115%; color:#C0C0C0}
span.txt_s {font-size: 90%;}
span.txt_xs {font-size: 80%;}

.lhslist {
margin-left: 15px;
margin-right: 15px
}

.musicianslist {
margin-top:85px;
margin-bottom:45px;
padding-left:20px;
font-size: 90%;
}




/* =================  LINK STYLES =================  */

a:link.nxt			
{ border-right: 1px solid #2E2B27; padding: 0 8px 0 8px; color: #DD5A1F; text-decoration: underline; }
a:visited.nxt		
{ border-right: 1px solid #2E2B27; padding: 0 8px 0 8px; color: #DD5A1F; text-decoration: underline; }
a:active.nxt		
{ border-right: 1px solid #2E2B27; padding: 0 8px 0 8px; color: #CCCCCC; text-decoration: none; }
a:hover.nxt			
{ border-right: 1px solid #2E2B27; padding: 0 8px 0 8px; color: #CCCCCC; text-decoration: none; }
a:visited:hover.nxt	
{ border-right: 1px solid #2E2B27; padding: 0 8px 0 8px; color: #CCCCCC; text-decoration: none; }




a:link			{ color: #E07E3A; text-decoration: underline }
a:visited		{ color: #E07E3A; text-decoration: underline }
a:active		{ color: #E07E3A; text-decoration: none }
a:hover			{ color: #E07E3A; text-decoration: none }
a:visited:hover	{ color: #E07E3A; text-decoration: none }

a:link.wht			{ color: #999999; text-decoration: underline }
a:visited.wht		{ color: #999999; text-decoration: underline }
a:active.wht		{ color: #999999; text-decoration: none }
a:hover.wht			{ color: #999999; text-decoration: none }
a:visited:hover.wht	{ color: #999999; text-decoration: none }

a:link.brn			{ color: #706954; text-decoration: underline }
a:visited.brn		{ color: #706954; text-decoration: underline }
a:active.brn		{ color: #706954; text-decoration: none }
a:hover.brn			{ color: #706954; text-decoration: none }
a:visited:hover.brn	{ color: #706954; text-decoration: none }

a:link.gal			{ border: 2px solid #99999; }
a:visited.gal		{ border: 2px solid #99999; }
a:active.gal		{ border: 2px solid #FFFFFF; }
a:hover.gal			{ border: 2px solid #FFFFFF; }
a:visited:hover.gal	{ border: 2px solid #FFFFFF; }





/* ================= gallery ============================ */

.galri {
		width:480px;
		margin:20px 0 20px 0;
		float:left;
		text-align:left;
		font-size:90%;
		}
		
.photoframe img
	{
	margin:5px;
	cursor:pointer;
	border-style: solid;
	border-width: 3px;
	border-color: #000000;
	vertical-align:middle;
	}
	
#vert
	{
	margin:18px 5px 18px 5px;
	}	

.photoframe {
	height:106px; 
	width:106px; 
	border:1px solid #606060; 
	float:left; 
	margin:0 5px 5px 0; 
	text-align:center
	}





/* ================= form styles ============================ */

text {
	display:inline;
	margin: 0;
	padding: 0;
	font-size:100%;
	font-family:'Trebuchet MS', Tahoma, Verdana;
	}

textarea {
	display:inline;
	margin: 0;
	padding: 0;
	font-size:100%;
	font-family:'Trebuchet MS', Tahoma, Verdana;
	}

input {
	display:inline;
	margin: 0;
	padding: 0;
	font-size:100%;
	font-family:"Trebuchet MS", Tahoma, Verdana;
	}

select {
	display:inline;
	margin: 0;
	padding: 0;
	font-size:100%;
	font-family:"Trebuchet MS", Tahoma, Verdana;
	}

form {
	display:inline;
	margin: 0;
	padding: 0;
	font-size:100%;
	font-family:"Trebuchet MS", Tahoma, Verdana;
	}

checkbox {
	border:#666666 1px solid;
	padding: 1px;
	}

text {
	border:#666666 1px solid;
	padding: 1px;
	}

textarea {
	border:#666666 1px solid;
	padding: 1px;
	}

select {
	border:#666666 1px solid;
	padding: 1px;
	}

.textbox {
	border:#666666 1px solid;
	padding: 1px;
	}

.contact {
	margin-top:5px;
	float:left;
	vertical-align:top;
	}

#label {
	width:100px;
	font-size:90%;
	}
	
#box {
	width:290px
	}
	
	
	






/* =================  ALTERNATIVE DIV BASED LAYOUT =================  */

	#frame {
		width:770px;
		margin-right:auto;
		margin-left:auto;
		margin-top:15px;
		padding:0px;
		text-align:left;
		border: 1px solid #C0C0C0;
		background: url('http://www.tsyjo.com/images/bot.gif') repeat-x right bottom;
		min-height: 100%;
		}
	/* IE-specific hack */
	* html #container {
	height: 100%;
		}
		
	#contentleft {
		width:255px;
		padding:0;
		margin:auto;
		float:left;
		background-color: #2E2B25;
		background-image: url('http://www.tsyjo.com/images/hm_band.jpg');
		background-repeat: no-repeat;
	    background-position: bottom left;
	    height:100%;
		}
	
	
	#contentright {
		width:513px;
		padding:95px 0 0 0;
		float:right;
		background: #424242 url('http://www.tsyjo.com/images/headerw.jpg') no-repeat left top;
		height:auto;
		overflow:auto;
		}
		
		
		
.freestanding {
	margin:55px 0 25px 15px;
	font-size:1.2em;
}		
		
		
.musicians {
	font-size:1em;
	margin:7px 10px 0 13px;
	clear:both;
	padding:2px;
	border-top: 1px dotted #666666;
}		

.musicians .musc-name {
	width:150px;
	float:left;
	color:#FFB805;
	font-weight:bold;
	margin-bottom:5px;

}

.musicians .musc-details {
	width:285px;
	float:left;
	margin:0 0 5px 8px;
	}

.musicians .former {
	color:#999999;
	font-size:.95em;
}






