/*-------------------------------------------
  Colors:
	blue: #0084D3	
	dead arm: #99FF33
	caleesh: #EAAD1B
	misamisa: #A31D20
-------------------------------------------*/

	
/*---------------------------
 Features
---------------------------*/
	#features_bg { background-color: #FFF; height: 416px; width: 100%; }
	#feature { background: url(http://www.3sonsproductions.com/images/featured/3sons_featured3.jpg) no-repeat bottom center; height: 416px; margin: 0 auto; position: relative; width: 980px; }
	#feature h1 { font-family: Helvetica, sans-serif; text-transform: uppercase; font-size: 36px; color: #000; line-height: 115%; font-weight: normal; left: 0; position: absolute; top: 45px; z-index: 3; width: 450px; }
	#feature h1 span {color: #E32644; }
	#feature h1 a {font-family: Helvetica, sans-serif; text-transform: uppercase; font-size: 36px; color: #0084D3; line-height: 115%; font-weight: normal; }
	#feature h1 a:hover {text-decoration: underline;}
	#feature a:hover {color:#000;}
	#feature_container { height: 400px; overflow: hidden; position: relative; width: 980px; }
	#feature_container ul { left: 0; position: absolute; top: 0; width: 980px; }
	#feature_container ul li { height: 250px; display: block; padding: 225px 0 0 0; width: 325px;}
	
	#features_bg .wrapper { height: 400px; width: 1200px; position: relative; }
	.feature_content { width:980px; margin:auto;}
	.tabbed_area { float:left; width:980px; height: 313px; position: relative;} 		       
	 
	ul.tabs { position: absolute; bottom: 0px; left: 0px; z-index: 2; }	
	ul.tabs li {display: inline; padding:0; margin:0; }	
	ul.tabs li a {  
	    background:none;
			display: inline;
	    color:#666;  
	    padding:8px 10px 8px 10px;  
	    text-decoration:none;  
	    font-size:11px;  
	    font-family:Verdana, Arial, Helvetica, sans-serif;  
	    font-weight:bold;  
	 }  
	 ul.tabs li a:hover {  
	   color:#000;
	 }  
	 ul.tabs li a.active {  
	     background-color:#000;  
	     color:#FFF;  
	 }
	
/*---------------------------
 Body Content
---------------------------*/
	.content {margin-top: 50px;	}
	.content h3 {font-weight: bold; font-size: 16px;}
	.content p {width: 325px; color:#4D5F6D; font-size: 16px; margin-bottom: 0px; padding-bottom: 0px;}
	
	#content_1 { width: 1100px;}	
	#content_2, #content_3 { display:none; }
	#datacontent {float: left; width: 620px;}
	

	#datacontent p {}

	#datacontent .panels {
	  overflow: hidden;
	}

	#datacontent .panelsInner {
	  overflow: hidden;
	}
	
	#datacontent img {float:left; padding-right: 10px;}

	#datacontent .navigation ul {
	  list-style: none;
	  margin: 0;
	  display: block;
	  height: 30px;
	}

	#datacontent .navigation li {
	  float: left;
	}

	#datacontent .navigation li a {
	  outline: 0;
	  display: block;
	  background: none;
	  color: #0084D3;
	  text-decoration: none;
	  padding: 3px 8px;
		margin-right: 4px;
	  border: 1px solid #002840;
		font-weight: normal;
	}

	#datacontent .navigation li a:hover {
	  color: #fff;
	}

	#datacontent .navigation li a.selected {
	  background: #0084D3;
	  color: #fff;
	}
	
	#datacontent ul {
	  list-style: none;
	  margin: 0;
	  padding: 5px;
	  display: block;
	  height: 30px;
	}

	#datacontent li {
	  float: left;
	}

	#datacontent li a {
	  display: block;
	  padding: 2px 0px;
		margin-right: 4px;
		font-weight:bold;
		letter-spacing:1px;
	}

	#datacontent li a:hover {
	  color: #00CCFF;
	}

	#datacontent li a.selected {
	  background: #0084D3;
		
	}
	
	#datacontent .panels {
	  overflow: hidden;
	}

	#datacontent .panelsInner {
	  overflow: hidden;
	}

	#datacontent .panel {
	}
	
	ul.services {list-style: square inside; color: #FFF; padding-right: 3px;}
	ul.services li { margin-bottom: 5px;}
	      
/*	.content {background-color:#000; border-top: thin solid #008BAA; padding:15px 15px 25px 15px; margin-bottom:15px;}*/

	
/*---------------------------
 Music Page
---------------------------*/
	#music .wrapper {background: url(http://www.3sonsproductions.com/images/sub_music_bg.jpg)  no-repeat; width:1190px; padding:0;}
	#music .left img {float:left; padding-right: 10px;}
	#music .right {width: 380px; float: right;}
	#music #our_services {margin-top: 20px;}
	
	#music #datacontent {float: left; width: 100%;}
	#music h2 {color: #FFF; font-size: 21px; margin-bottom: 25px;}
	


/*---------------------------
 Dead Arm
---------------------------*/
	#artists #deadarm h1 {color: #99FF33;}
	#artists #deadarm h2 {color: #99FF33; font-size: 26px; margin-bottom: 25px;}
	#artists #deadarm h4 {color: #99FF33;}
	#artists #deadarm h6 {color: #99FF33;}
	#artists #deadarm #links a { color: #FFF; }
	#artists #deadarm #links a:hover { color: #99FF33; }
	
	#artists #deadarm #datacontent li a:hover { color: #99FF33;	}
	#artists #deadarm #datacontent li a.selected { background: #0084D3; }
	
	
	#images { height: 185px; width: 240px; padding:0; margin:0; overflow: hidden;}
	#images img { border:none; }	
	
	#artists #deadarm blockquote { background: url(http://www.3sonsproductions.com/images/green_quote.jpg) no-repeat top left; color: #FFF; font: 1.5em 'Helvetica', 'Lucida Sans Unicode', sans-serif; margin-bottom: 35px;  }
	#artists #deadarm blockquote div { background: url(http://www.3sonsproductions.com/images/green_quote.jpg) no-repeat bottom right; padding: 8px 0 0 22px; }
	#artists #deadarm blockquote div p { color: #FFF; font-size: 24px; padding-bottom: 4px; line-height:120%; }
	
	#artists img.padded {padding-bottom:25px;}
	#artists #deadarm #datacontent {height: 300px;}
	
	#artists #deadarm #datacontent h4 {color: #99FF33;}
	
	
/*---------------------------
 Caleesh
---------------------------*/
	#artists #caleesh h1 {color: #EAAD1B;}
	#artists #caleesh h2 {color: #EAAD1B; font-size: 26px; margin-bottom: 25px;}
	#artists #caleesh h4 {color: #EAAD1B;}
	#artists #caleesh h6 {color: #EAAD1B;}
	#artists #caleesh #links a { color: #FFF; }
	#artists #caleesh #links a:hover { color: #EAAD1B; }
	
	#artists #caleesh #datacontent h4 {color: #EAAD1B;}	
	#artists #caleesh #datacontent li a:hover { color: #EAAD1B;	}
	#artists #caleesh #datacontent li a.selected { background: #EAAD1B; }
	
	
	#images { height: 185px; width: 240px; padding:0; margin:0; overflow: hidden;}
	#images img { border:none; }	
	
	#artists #caleesh blockquote { background: url(http://www.3sonsproductions.com/images/leesh_quote.jpg) no-repeat top left; color: #FFF; font: 1.5em 'Helvetica', 'Lucida Sans Unicode', sans-serif; margin-bottom: 35px;  }
	#artists #caleesh blockquote div { background: url(http://www.3sonsproductions.com/images/leesh_quote.jpg) no-repeat bottom right; padding: 8px 0 0 22px; }
	#artists #caleesh blockquote div p { color: #FFF; font-size: 24px; padding-bottom: 4px; line-height:120%; }
	
	#artists img.padded {padding-bottom:25px;}
	#artists #caleesh #datacontent {height: 300px;}
	
/*---------------------------
 Cleo
---------------------------*/
	#artists #cleo h1 {color: #FF4F51;}
	#artists #cleo h2 {color: #FF4F51; font-size: 26px; margin-bottom: 25px;}
	#artists #cleo h4 {color: #FF4F51;}
	#artists #cleo h6 {color: #FF4F51;}
	#artists #cleo #links a { color: #FFF; }
	#artists #cleo #links a:hover { color: #FF4F51; }
	#artists #cleo #description a { color: #FF4F51; }
	#artists #cleo #description a:hover { color: #FFF; }

	#artists #cleo #datacontent h4 {color: #FF4F51;}	
	#artists #cleo #datacontent li a:hover { color: #FF4F51;	}
	#artists #cleo #datacontent li a.selected { background: #FF4F51; }


	#images { height: 185px; width: 240px; padding:0; margin:0; overflow: hidden;}
	#images img { border:none; }	

	#artists #cleo blockquote { background: url(http://www.3sonsproductions.com/images/cleo_quote.jpg) no-repeat top left; color: #FFF; font: 1.5em 'Helvetica', 'Lucida Sans Unicode', sans-serif; margin-bottom: 35px;  }
	#artists #cleo blockquote div { background: url(http://www.3sonsproductions.com/images/cleo_quote.jpg) no-repeat bottom right; padding: 8px 0 0 22px; }
	#artists #cleo blockquote div p { color: #FFF; font-size: 24px; padding-bottom: 4px; line-height:120%; }

	#artists img.padded {padding-bottom:25px;}
	#artists #cleo #datacontent {height: 300px;}	
	
/*---------------------------
 Misa Misa
---------------------------*/
	#artists #misamisa h1 {color: #D12424;}
	#artists #misamisa h2 {color: #D12424; font-size: 26px; margin-bottom: 25px;}
	#artists #misamisa h4 {color: #D12424;}
	#artists #misamisa h6 {color: #D12424;}
	#artists #misamisa #links a { color: #FFF; }
	#artists #misamisa #links a:hover { color: #D12424; }
	#artists #misamisa #description a { color: #D12424; }
	#artists #misamisa #description a:hover { color: #FFF; }

	#artists #misamisa #datacontent h4 {color: #D12424;}	
	#artists #misamisa #datacontent li a:hover { color: #D12424;	}
	#artists #misamisa #datacontent li a.selected { background: #D12424; }

	#images { height: 185px; width: 240px; padding:0; margin:0; overflow: hidden;}
	#images img { border:none; }	

	#artists #misamisa blockquote { background: url(http://www.3sonsproductions.com/images/misa_quote.jpg) no-repeat top left; color: #FFF; font: 1.5em 'Helvetica', 'Lucida Sans Unicode', sans-serif; margin-bottom: 35px;  }
	#artists #misamisa blockquote div { background: url(http://www.3sonsproductions.com/images/misa_quote.jpg) no-repeat bottom right; padding: 8px 0 0 22px; }
	#artists #misamisa blockquote div p { color: #FFF; font-size: 24px; padding-bottom: 4px; line-height:120%; }

	#artists img.padded {padding-bottom:25px;}
	#artists #misamisa #datacontent {height: 300px;}


/*---------------------------
 J. HARM
---------------------------*/
	#artists #jharm h1 {color: #F67A00;}
	#artists #jharm h2 {color: #F67A00; font-size: 26px; margin-bottom: 25px;}
	#artists #jharm h4 {color: #F67A00;}
	#artists #jharm h6 {color: #F67A00;}
	#artists #jharm #links a { color: #FFF; }
	#artists #jharm #links a:hover { color: #F67A00; }
	#artists #jharm #description a { color: #F67A00; }
	#artists #jharm #description a:hover { color: #FFF; }

	#artists #jharm #datacontent h4 {color: #F67A00;}	
	#artists #jharm #datacontent li a:hover { color: #F67A00;	}
	#artists #jharm #datacontent li a.selected { background: #F67A00; }

	#images { height: 185px; width: 240px; padding:0; margin:0; overflow: hidden;}
	#images img { border:none; }	

	#artists #jharm blockquote { background: url(http://www.3sonsproductions.com/images/jharm_quote.jpg) no-repeat top left; color: #FFF; font: 1.5em 'Helvetica', 'Lucida Sans Unicode', sans-serif; margin-bottom: 35px;  }
	#artists #jharm blockquote div { background: url(http://www.3sonsproductions.com/images/jharm_quote.jpg) no-repeat bottom right; padding: 8px 0 0 22px; }
	#artists #jharm blockquote div p { color: #FFF; font-size: 24px; padding-bottom: 4px; line-height:120%; }

	#artists img.padded {padding-bottom:25px;}
	#artists #jharm #datacontent {height: 300px;}

/*---------------------------
 KB
---------------------------*/
	#artists #kb h1 {color: #9BB758;}
	#artists #kb h2 {color: #9BB758; font-size: 26px; margin-bottom: 25px;}
	#artists #kb h4 {color: #9BB758;}
	#artists #kb h6 {color: #9BB758;}
	#artists #kb #links a { color: #FFF; }
	#artists #kb #links a:hover { color: #9BB758; }
	#artists #kb #description a { color: #9BB758; }
	#artists #kb #description a:hover { color: #FFF; }

	#artists #kb #datacontent h4 {color: #9BB758;}	
	#artists #kb #datacontent li a:hover { color: #9BB758;	}
	#artists #kb #datacontent li a.selected { background: #9BB758; }

	#images { height: 185px; width: 240px; padding:0; margin:0; overflow: hidden;}
	#images img { border:none; }	

	#artists #kb blockquote { background: url(http://www.3sonsproductions.com/images/kb_quote.jpg) no-repeat top left; color: #FFF; font: 1.5em 'Helvetica', 'Lucida Sans Unicode', sans-serif; margin-bottom: 35px;  }
	#artists #kb blockquote div { background: url(http://www.3sonsproductions.com/images/kb_quote.jpg) no-repeat bottom right; padding: 8px 0 0 22px; }
	#artists #kb blockquote div p { color: #FFF; font-size: 24px; padding-bottom: 4px; line-height:120%; }

	#artists img.padded {padding-bottom:25px;}
	#artists #kb #datacontent {height: 300px;}


/*---------------------------
	ARTISTS
---------------------------*/
	
	#artists div.column_left {
		float:left;
		margin:0 20px 0 0;
		width:480px;
	}
	
	#artists div.column_right {
		float:right;
		width:480px;
	}
	
	#artists div.feature img {
		float: left;
		width: 495px;
		height: 350px;
		margin-right: 20px;			
	}

	#artists div.feature {
		float:left;
		height:350px;
		width: 100%;
		margin-bottom:20px;
		overflow:hidden;
	
	}
	
	#artists div.person {
		float:left;
		margin-bottom:20px;
		overflow:hidden;
	}
	
	#artists div.person img {
		float: left;
		height: 140px;
		width: 140px;	
		margin-right: 20px;			
	}
	
	#artists div.person .bio {
		float:left;
		margin:0 0 20px 0px;
		width:300px;
	}
	
	#artists div.person .bio p{
		font-size: 13px;
	}
	
	#artists #datacontent {
		width: 500px;
		
	}