/*
HarryDesign Base Stylesheet
Author: Harry Razon
URL: www.harrydesign.com
*/

/* Reset browser defaults */
html
{	border-left:none;border-right:none;cursor:default;	}

body, h2, h3, h4, h5, h6, p, ol, ul, li, dl, dt, dd, pre, img, form, fieldset
{ padding:0; margin:0; border:none;	}

h1, h2, h3, h4, h5, h6
{	font-weight:normal; margin: 0;	}

ol, ul
{	list-style:none;	}

img, object	{	display:block;	}

table
{	border-collapse:collapse;	}

th
{	padding:0;	font-weight:normal;	text-align:left;	}

td
{	padding:0; vertical-align:top;	}

hr
{	display:none;	}

*:focus
{	outline:none;	}

/* TOOLKIT */
.left			{	float: left; }
.right			{	float: right; }
.clear			{	clear: both; } 
.hidden			{	visibility: hidden;	}
.trans			{ 	filter:alpha(opacity=80); opacity:0.8; }
.roundBorder	{  -moz-border-radius: 15px; -webkit-border-radius: 15px;	}


body		{
			color: #FFF;
			font-family: 'Josefin Sans Std Light', arial, serif;
			background: #000;
			}

a			{	text-decoration: none; color: #FFF; 	}



#page-wrap	{
			width: 1150px; 
			margin: 0 auto;	
			}
			
			#page-wrap-narrow
						{
						width: 700px; 
						margin: 0 auto;	
						}
			
#header		{	
			text-align: left;
			}
			
			.title	{
					font-size: 5.25em;
					text-transform: capitalize;
					margin-top: 15px;
					margin-left: 150px;
					text-shadow: 0 0 0.4em #E70000, 0 0 0.4em #E70000;
					}

			.title a:hover	{
					color: #E70000;
					text-shadow: 0 0 0.4em #FFF, 0 0 0.4em #FFF;
					}
			
			h1:after	{
						content: " mezzo soprano";
						font-size: 18px;
						text-transform: capitalize;
						color: yellow;
						text-shadow: none;
						}		


/* MAIN CONTENT AREA */		
								
#main		{	
			width: 540px;
			min-height: 525px;
			padding: 7px 5px 0px;
			float: left;
			font-family: 'Georgia', Georgia, serif;
			font-size: 0.85em;
			line-height: 1.55em;
			}
			
			
			#main h3			{
								font-weight: bold; 
								text-transform: uppercase;
								margin-bottom: 15px;
								}
								
			#main p				{	margin-bottom: 12px;	}
			#main p:first-line	{ text-transform: uppercase; }
			
			#main a				{ 	
								font-size: 1em;
								text-transform: capitalize;
								}
									
					#main a:hover	{	color: #E70000; text-decoration: none;	}

			#mainContact		
			{	
			width: 540px;
			min-height: 525px;
			margin-left: 25px;
			padding: 7px 5px 0px;
			float: left;
			font-family: 'Georgia', Georgia, serif;
			font-size: 0.85em;
			line-height: 1.55em;
			}

			#mainContact h3			{
								font-weight: bold; 
								text-transform: uppercase;
								margin-bottom: 15px;
								}
								
			#mainContact p				{	margin-bottom: 12px;	}
			#mainContact p:first-line	{ text-transform: uppercase; }
			
			#mainContact a				{ 	
								font-size: 1em;
								text-transform: capitalize;
								}
								
			#mainContact a:hover	{	color: #E70000; text-decoration: none;	}
								

/* FORM MAIN */

#headerForm		{	
				text-align: center;
				margin-bottom: 150px;
				}

			.title2	{
					font-size: 5.25em;
					text-transform: capitalize;
					margin-top: 15px;
					text-shadow: 0 0 0.4em #E70000, 0 0 0.4em #E70000;
					}

			.title3	{
					font-size: 2.25em;
					text-transform: capitalize;
					margin-top: 25px;
					text-shadow: 0 0 0.4em #E70000, 0 0 0.4em #E70000;
					}
			
#mainForm	{
			width: 100%;
			min-height: 200px;
			text-align: center;
			font-size: 2.25em;
			text-transform: capitalize;
			text-shadow: 0 0 0.4em #E70000, 0 0 0.4em #E70000;
			}
			
			

/* TABLES - ENGAGEMENTS & REPERTOIRE */

			table	{ }
			thead	{	font-weight: bold; text-transform: uppercase; margin-bottom: 5px; color: #E70000; }
			thead td.lang	{	font-style: normal;	}
			td.part	{	width: 175px; text-transform: none; }
			td.production {	width: 300px; text-transform: none;}
			td.lang	{	width: 150px; font-style: italic; }
			
			table#engagements td.part	{	width: 235px; text-transform: capitalize;	}
			table#engagements td.production	{	width: 375px; text-transform: none;	}
			table#engagements td.lang	{	width: 125px; text-transform: capitalize;	}
			

/* GALLERY & MEDIA */
			
			ul#gallery	{
						font-size: 1em;
						}
								
			ul#gallery li	{
						display:block;
						height: 80px;
						width: 80px;
						float: left;
						margin-right: 10px;
						margin-bottom: 10px;
						background: #777;
						}
						
			ul#video	{
						font-size: 1em;
						margin-left: 145px;
						}
								
			ul#video li	{
						display:block;
						height: 75px;
						width: 125px;
						float: left;
						margin-right: 10px;
						background: #777;
						}
																	
						
		#samples		{
						width: 210px;
						height: 110px;
						padding: 5px 5px 0;
						margin: 15px auto 0;

						}

		#samples li {	margin: 0 0 3px 0;	}
		#samples li a {
						display: block;
						height: 20px;
						width: 200px;
						padding: 3px 3px 3px 25px;
						vertical-align: top; 
						margin: 0 6px 5px 0;
						-moz-border-radius: 8px; 
						-webkit-border-radius: 5px;
						color: #000;
						background-color: #FFF; 
						background-image: url(PNGs/play.png);
						background-position: 5px center; 
						background-repeat: no-repeat;
									}
						
.sm2_paused 	{ background-image: url(PNGs/pause.png) !important; background-repeat: no-repeat; }
.sm2_playing 	{ background-color: #777 !important; color: #FFF; }

/* FORM */

.iform {font: 12px/26px Verdana, Geneva, sans-serif; width:400px; margin:30px auto;}
.iform ul { margin:0; padding:0; list-style:none;}
.iform ul ul { overflow:auto}
.iform li { padding-bottom:5px;}
.iform label { 
 width:130px; display:block; float:left; line-height:26px;
}
.iform label.ilabel { 
 width:auto; display:inline; float:none; line-height:26px; padding:0 5px
}

.iform .itext,.iform .itextarea,.iform .iselect,.iform .ibutton { 	
	width:200px;
	border:1px solid #999;
	-webkit-border-radius: 3px;-khtml-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
	margin:0;
	padding:5px;
	background: #fff;
	background: -webkit-gradient(linear, left top, left 25, from(#fff), color-stop(6%, #eee), to(#fff));
	background: -moz-linear-gradient(top, #fff, #eee 2px, #fff 25px);
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

}

.iform .itext:hover,.iform .itextarea:hover,.iform .iselect:hover,.iform .ibutton:hover,
.iform .itext:focus,.iform .itextarea:focus,.iform .iselect:focus,.iform .ibutton:focus{

border-color: #333;
background:#fff;

}

.iform .itext {

}


.iform .itextarea{ 
	height:100px; width: 250px;
}
.iform .ibutton {

	width:auto;
	background: #efefef;
	background: -webkit-gradient(linear, left top, left 25, from(#dadada), color-stop(6%, #efefef), to(#dadada));
	background: -moz-linear-gradient(top, #dadada, #efefef 2px, #dadada 25px);
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

}
.iform .ibutton:hover,.iform .ibutton:focus { background:#dadada;}
.iform li.iheader { display:block; font-size:18px; border-bottom:1px solid #000; padding:5px; text-indent:10px; margin:5px 0 15px }
.iform li.iseparator { display:block; text-indent:-9999px; height:10px; line-height:10px; border-bottom:1px solid #999;margin:5px 0 15px }

.iform .required { border-color:#F00; }

#imessageOK,#imessageERROR{ border:1px solid #F60; padding:10px; font-size:16px; font-weight:bold; text-align: center; display:none; margin-bottom:20px;

	background: #F90;
	background: -webkit-gradient(linear, left top, left 25, from(#F90), color-stop(4%, #FC0), to(#F90));
	background: -moz-linear-gradient(top, #F90, #FC0 1px, #F90 25px);
	color:#fff;
	}

/* SIDEBARS */
								
#sidebar-left	{
				width: 238px;
				min-height: 492px;
				padding-top: 35px;
				float: left;
				background: url(PNGs/Jenny-Diver.png) no-repeat top left;
				}
							
#sidebar-right	{	
			width: 180px;
			min-height: 492px;
			padding: 35px 5px 0px 10px;
			float: left;
			}

			#sidebar-right h3	{
								font-weight:600;
								text-transform: uppercase;
								text-shadow: 0 0 0.1em #F87, 0 0 0.1em #F87;
								text-align: center;
								}

/* NAVIGATION MENU */

			ul#menu		{
						font-size: 1.25em;
						}
								
			ul#menu li	{
						
						}
						
	ul#menu li a {
						display: block;
						width: auto;
						text-transform: uppercase;
						line-height: 1.25em;
						text-indent: 0.4em;
						font-weight: bold;
						border-left: #000 solid 2px;
						}
			
	ul#menu li a:hover 	{
								color: #E70000;
								border-left: #E70000 solid 2px;
								text-shadow: 0 0 0.3em #FFF, 0 0 0.3em #FFF;
								}

body.bio ul#menu li a.bio		{	border-left: #E70000 solid 2px;	}
body.engagements ul#menu li a.engagements		{	border-left: #E70000 solid 2px;	}
body.repertoire ul#menu li a.repertoire		{	border-left: #E70000 solid 2px;	}
body.gallery ul#menu li a.gallery		{	border-left: #E70000 solid 2px;	}
body.media ul#menu li a.media		{	border-left: #E70000 solid 2px;	}
body.contact ul#menu li a.contact		{	border-left: #E70000 solid 2px;	}

body.bio .quotes		{	visibility: visible; }
body.repertoire .quotes 		{	visibility: visible; }
body.gallery .quotes	{	visibility: visible; }

body.repertoire #sidebar-left		{	background: url(../galleryPics/GinaRazon_Carmen_02.jpeg) no-repeat top left;	}
body.engagements #sidebar-left		{	background: url(../galleryPics/GinaRazon_Olsen_01.jpeg) no-repeat top center;	}
body.media #sidebar-left		{	background: url(../galleryPics/GinaRazon_BW.jpeg) no-repeat top center; margin-top: 44px;	}
body.gallery #sidebar-left		{	background: url(../galleryPics/gina_cover2.png) no-repeat top center; margin-top: 42px;	}
body.contact #sidebar-left		{	background: url(../galleryPics/ginaRazon_headshot.png) no-repeat top center; margin-top: 44px;	}

body.contact #main, body.contact #sidebar-left, body.contact #sidebar-right				{ min-height: 350px;	}

/* OTHER */
						
			#upcoming	{
						width: 210px;
						height: 95px;
						padding: 5px 5px 0;
						margin: 30px auto 0;
						
						}

						
						#upcoming li	{
									height: 14px;
									width: 200px;
									padding: 2px 0 8px;
									border: 1px solid #777;
									background: #CCC;
									}

			.quotes		{
						height: 95px;
						margin-top: 50px;
						margin-left: 10px;
						visibility: hidden;
						}


						.credit	{	text-transform: capitalize;
									color: #FFCC00;
									text-align: right;
									}
			
			#social		{
						font-family: 'Tangerine', arial, serif;
						text-align: right;
						}			
			
#footer		{	
			text-align: center;
			}