@charset "utf-8";
/* CSS Document */

* {
	margin:0px;
	padding:0px;
	border:none;
	outline:none;	
}

img {
	max-width:100%;
	height:auto;	
}


#browserContainer {
	width:100%;
	background-color:transparent;	
}

#mainContainer {
	position:relative;
	width: 880px;
	margin:	0px auto;
	font-size:16px;
}

#headerFlash {
	width:730px;
	height:100px;
	margin:0px auto;	
}

ul#navigation {
	width:792px;
	height:32px;
	margin:0px auto;
	padding:0px;
/*	line-height: 2em;*/
	list-style-type:none;
}

ul#navigation li a{
	display:block;
	height:32px;
	outline:none;
}

ul#navigation li {
	float: left;
}

ul#navigation li span{
	margin-left: -5000px;
}

ul#navigation li.join {
	position:relative;
	background-position:bottom left;
	background-image:url(../main_nav.png);
	display:block;
	width:101px;
	height:32px;
	float:left;
}

ul#navigation li.join:hover, ul#navigation li.join:active {
	position:relative;
	background-position:top left;
	background-image:url(../main_nav.png);
	display:block;
	width:101px;
	height:32px;
	float:left;
}

ul#navigation li.men {
	position:relative;
	background-position:-101px 32px;
	background-image:url(../main_nav.png);
	display:block;
	width:88px;
	height:32px;
	float:left;
}

ul#navigation li.men:hover, ul#navigation li.men:active {
	position:relative;
	background-position:-101px 0px;
	background-image:url(../main_nav.png);
	display:block;
	width:88px;
	height:32px;
	float:left;
}

ul#navigation li.women {
	position:relative;
	background-position:-189px 32px;
	background-image:url(../main_nav.png);
	display:block;
	width:109px;
	height:32px;
	float:left;
}

ul#navigation li.women:hover, ul#navigation li.women:active {
	position:relative;
	background-position:-189px 0px;
	background-image:url(../main_nav.png);
	display:block;
	width:109px;
	height:32px;
	float:left;
}

ul#navigation li.kids {
	position:relative;
	background-position:-298px 32px;
	background-image:url(../main_nav.png);
	display:block;
	width:145px;
	height:32px;
	float:left;
}

ul#navigation li.kids:hover, ul#navigation li.kids:active {
	position:relative;
	background-position:-298px 0px;
	background-image:url(../main_nav.png);
	display:block;
	width:145px;
	height:32px;
	float:left;
}

ul#navigation li.voice {
	position:relative;
	background-position:-443px 32px;
	background-image:url(../main_nav.png);
	display:block;
	width:109px;
	height:32px;
	float:left;
}

ul#navigation li.voice:hover, ul#navigation li.voice:active {
	position:relative;
	background-position:-443px 0px;
	background-image:url(../main_nav.png);
	display:block;
	width:109px;
	height:32px;
	float:left;
}

ul#navigation li.stylists {
	position:relative;
	background-position:-552px 32px;
	background-image:url(../main_nav.png);
	display:block;
	width:109px;
	height:32px;
	float:left;
}

ul#navigation li.stylists:hover, ul#navigation li.stylists:active {
	position:relative;
	background-position:-552px 0px;
	background-image:url(../main_nav.png);
	display:block;
	width:109px;
	height:32px;
	float:left;
}

ul#navigation li.contact {
	position:relative;
	background-position:bottom right;
	background-image:url(../main_nav.png);
	display:block;
	width:131px;
	height:32px;
	float:left;
}

ul#navigation li.contact:hover, ul#navigation li.contact:active {
	position:relative;
	background-position:top right;
	background-image:url(../main_nav.png);
	display:block;
	width:131px;
	height:32px;
	float:left;
}

#content {
	width: 880px;
	min-height: 405px;
	padding: 15px 0px;
}

#contentLeft {
	position:relative;
	width:440px;
	float:left;
	min-height:405px;
	overflow:hidden;
}
                       /* DETAIL PAGES*/
#headshot {
	width:320px;
	height:320px;
	margin: 0 0 0 440px;	
}

#compThumbs {
	width:390px;
	height:60px;
	margin:10px 0 10px 440px;
	text-align:center;
}

.compThumb {
	width:60px;
	float:left;
}

#contentRight {
	position:relative;
	width:439px;
	min-height:405px;
	float:left;	
	overflow:hidden;
}

#infoArea {
	width:439px;
	height:320px;	
	margin: 0 0 0 -439px;
	text-align:center;
	font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; font-weight:900;
	font-style:normal;
	color:#CCC;
	overflow:hidden;
}

#infoArea h1 {
	padding: 12px 0px;
	color:#000;
	font-size:19px;	
}

.notShown {
	position:absolute;	
	width:439px;
	height:320px;
	top:-600px;
	z-index:2;
	margin: 0px auto;
	text-align:center;
}

.shown {
	position:absolute;
	width:439px;
	height:320px;
	left:0px;
	top:0px;	
	z-index:3;
	margin: 0px auto;
	text-align:center;
}



#resumeArea {
	width:439px;
	height:auto;
/*	height:60px;*/
	margin:10px 0 10px -439px;
	text-align:center;
}

#backBtn {
	width:120px;
	height:70px;
	padding-top:30px;
	margin:0 auto;
	text-align:center;
	clear:both;
}

#blurLeft {
	width:47px;
	height:405px;
	position:absolute;
	right:0;
	top:0;
	background-image:url(../right_blur.png);
}

#blurRight {
	width:47px;
	height:405px;
	position:absolute;
	left:0;
	top:0;
	background-image:url(../left_blur.png);
}



/*						THUMBNAIL PAGES*/

.thumbAge {
	width:880px;
	float:left;
	padding-top:25px;	
}


.leftThumbArea {
	width:440px;
	min-height:145px;
	text-align:center;
	margin-top:15px;
	float:left;
	clear:left;
	overflow:hidden;
}

.leftThumbArea .thumb {
	width:145px;
	min-height:145px;
	float:left;	
}

.leftThumbArea .thumbName {
	width:295px;
	float:left;	
	font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; font-weight:900;
	font-style:normal;
	font-size:18px;
	color:#000;
	margin-top:40px;
}

.leftThumbArea .thumbDots {
	width:295px;
	height:35px;
	float:left;	
}

.union {
	width:295px;
	float:left;	
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:15px;
	color:#999;
}

.voiceUnion {
	width:440px;
	height:20px;
	float:left;	
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:15px;
	color:#999;
}


.rightThumbArea {
	width:440px;
	min-height:145px;
	text-align:center;
	margin-top:15px;
	float:left;
	overflow:hidden;
}

.rightThumbArea .thumb {
	width:145px;
	height:145px;
	float:right;	
}

.rightThumbArea .thumbName {
	width:295px;
	float:right;	
	font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; font-weight:900;
	font-style:normal;
	font-size:18px;
	color:#000;
	margin-top:40px;
}

.rightThumbArea .thumbDots {
	width:295px;
	height:35px;
	float:right;	
}


                     /*     VOICE*/
						
.leftThumbArea .voiceName {
	width:440px;
	float:left;	
	font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; font-weight:900;
	font-style:normal;
	font-size:18px;
	color:#000;
	margin-top:0;
}

.leftThumbArea .voicePlayers {
	width:440px;
	display:block;
	float:left;
	overflow:hidden;
	min-height:150px;
}

.voicePlayers audio {
	width:400px;
	height:50px;	
}

.rightThumbArea .voiceName {
	width:440px;
	float:left;	
	font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; font-weight:900;
	font-style:normal;
	font-size:18px;
	color:#000;
	margin-top:0;
}

.rightThumbArea .voicePlayers {
	width:440px;
	float:left;
	display:block;
	overflow:hidden;
	min-height:150px;
}




.controlContainer {
	width:400px;
	margin:0 auto;
}


.nowPlayBtn {
background-image:url(../now_audio_control_btns.png);
width:130px;
height:40px;
display:block;
float:left;
background-position:left top;
}

.nowPlayBtn span {
margin-left:-9000px;
}

.nowPlayBtn:hover {
background-position:left -40px;
cursor:pointer;
}



.nowPauseBtn {
background-image:url(../now_audio_control_btns.png);
width:130px;
height:40px;
display:block;
float:left;
background-position:-130px top;
}

.nowPauseBtn span {
margin-left:-9000px;
}

.nowPauseBtn:hover {
background-position:-130px -40px;
cursor:pointer;
}





.nowStopBtn {
background-image:url(../now_audio_control_btns.png);
width:130px;
height:40px;
display:block;
float:left;
background-position:-260px top;
}

.nowStopBtn span {
margin-left:-9000px;
}

.nowStopBtn:hover {
background-position:-260px -40px;
cursor:pointer;
}

/*contact page*/

#contactInfo {
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#999;
	font-size:16px;	
}

#contactInfo h1 {
	text-align:center;
	font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; font-weight:900;
	font-size:28px;
	line-height:32px;	
	margin:12px 0 10px;;
}
/*whats Happening page*/

#whatsHappeningInfo {
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:#999;
	font-size:14px;
	line-height:18px;
	margin:0 auto;
	width:450px;
}

#whatsHappeningInfo a:link, #whatsHappeningInfo a:visited, #whatsHappeningInfo a:hover{
	color:#8ddaf9;
	text-decoration:none;
}

#whatsHappeningInfo h1 {
	text-align:center;
	font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; font-weight:900;
	font-size:28px;
	line-height:32px;	
	margin:12px 0;
}

#whatsHappeningInfo h2 {
	text-align:left;
	font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; font-weight:900;
	color:#999;
	font-size:18px;
	line-height:22px;	
	margin:5px 0;
}


/*join page*/

#joinContentLeft {
	position:relative;
	width:375px;
	padding:0 10px 0 45px;
	margin-right:10px;
	border-right: 1px solid #CCC;
	float:left;
	min-height:405px;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:#999;
	font-size:14px;	
}

#joinContentLeft h1 {;
	text-align:left;
	font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; font-weight:900;
	font-size:28px;
	line-height:32px;	
	margin-top:12px;
	text-align:left;
}

#joinContentRight {
	position:relative;
	width:395px;
	min-height:405px;
	float:left;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:#999;
	font-size:14px;		
}

#joinContentRight h2 {;
	text-align:left;
	font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; font-weight:900;
	font-style:normal;
	color:#999;
	font-size:17px;
	margin-top:12px;
}

.note {
	font-size:12px;
	font-style:italic;	
}

.highlight {
	 color:#8ddaf9;
}

.highlight span {
	 color:#999;
}

#clearAll {
	clear:both;	
	width:880px;
	height:120px;
}

#footer {
	width:880px;
	font-size: 11px;
	color:#999;	
	text-align:center;
	margin: 0px auto;
}

#footer a, #footer a:link, #footer a:visited, #footer a:active {
		color:#999;
		text-decoration:none;
}

#footer a:hover {
		 color:#8ddaf9;
		 text-decoration:underline;
}


@media screen and (max-width: 580px) and (min-width:120px) 
{
#header {
width:100%;
height:60px;
 background:url('../now_header_m.jpg') 0 0 no-repeat;
}

#headerFlash {
display:none;
}	

ul#navigation {
	height:230px;	
}

ul#navigation, ul#navigation li.join, ul#navigation li.men, ul#navigation li.women, ul#navigation li.kids, ul#navigation li.voice, ul#navigation li.stylists, ul#navigation li.contact {
width: 100%;
background-image:none;
background-color:#FFF;
color:#999;
border-bottom: 1px solid #999;
text-align:center;
}

ul#navigation li.join:hover, ul#navigation li.men:hover, ul#navigation li.women:hover, ul#navigation li.kids:hover, ul#navigation li.voice:hover, ul#navigation li.stylists:hover, ul#navigation li.contact:hover {
width: 100%;
background-image:none;
background-color:#E6E6E6;
color:#999;
border-bottom: 1px solid #999;
text-align:center;	
}

ul#navigation li span {
margin:0;
font-size:18px;
line-height:32px;
font-family:"Arial Black", Gadget, sans-serif;
font-weight:bold;	
}

ul#navigation a, ul#navigation a:hover {
color:#999;
text-decoration:none;
}





/* ===================== THUMB PAGE =============== */


#mainContainer {
width: 100%;
}

#content {
width: 100%;
}

.thumbAge {
width: 100%;
}

.thumbAge img {
margin-left: -95%;
}

.leftThumbArea {
width: 100%;
}

.union {
width: 155px;
font-size: 13px;
}

.leftThumbArea .thumbName {
width: 155px;
font-size: 15px;
}

.leftThumbArea .thumbDots {
display: none;
}

.rightThumbArea {
width: 100%;
}

.rightThumbArea .thumbName {
width: 155px;
font-size: 15px;
}

.rightThumbArea .thumbDots {
display: none;
}



/* ===================== DETAIL PAGE =============== */


.shown, .notShown {
position: relative;
width: 100%;
top:0;
}

#compThumbs {
display: none;
}

#blurLeft {
display: none;
}

#blurRight {
display: none;
}

#contentLeft {
position: relative;
width: 100%;
min-height: 320px;
}

#headshot {
margin:0;	
}

#contentRight {
position: relative;
width: 100%;
min-height: 405px;
float: left;
overflow: hidden;
}



#infoArea {
width: 100%;
height:auto;
margin: 0;
text-align: center;
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
font-weight: 900;
font-style: normal;
color: #CCC;
overflow: hidden;
}

#resumeArea {
	margin-left:0;	
}

}    /*=================================END -- (max-width: 580px) and (min-width:120px)*/







.leftThumbArea {
width: 25%;
min-height: 145px;
text-align: center;
margin-top: 35px;
float: left;
/* clear: left; */
overflow: hidden;
}


.leftThumbArea .thumb {
width: 100%;
min-height: 145px;
float: left;
}



.leftThumbArea .thumbName {
width: 100%;
float: left;
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
font-weight: 900;
font-style: normal;
font-size: 18px;
color: #000;
margin-top: 7px;
}







.rightThumbArea {
width: 25%;
min-height: 145px;
text-align: center;
margin-top: 35px;
float: left;
overflow: hidden;
}



.rightThumbArea .thumb {
width: 100%;
height: 145px;
float: right;
}



.rightThumbArea .thumbName {
width: 100%;
float: right;
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
font-weight: 900;
font-style: normal;
font-size: 18px;
color: #000;
margin-top: 7px;
}



.thumbDots {
display: none;
}


.union {
width: 100%;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
color: #999;
}