/*------------------------------------------------------
++++++++++++++++++++++++++++++++++++++++++++++++++++++++
			  HandsFirst BabySign Styles 2004			   
							-
				Written By: Aaron Glenn
++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-------------------------------------------------------*/

/*------------------------------------------------------
					HTML ELEMENTS
-------------------------------------------------------*/
body{
	margin: 0;
	padding: 0;
	font: 80% Comic Sans MS, Trebuchet MS, Helvetica, Arial, Sans-Serif; 
	/* Comic Sans = Sucks, But What Can You Do? */
	font-weight: bold;
	color: #444;
	background: #336699 url(../_media/images/layout/body_bg.png) repeat top left;
	text-align: center;
}
div{
	position: relative;
}
h1, h2, h3, h4{
	color: #009999;	
	margin: 0;
	padding: 0;
}
h1{
	font-size: 1.5em;
}
h2{
	font-size: 1.2em;
	background: #fff url(../_media/images/layout/h2_hand.gif) no-repeat 0 50%;	
}
h3{
	font-size: 1.7em;
	padding-bottom: 4px;
	background: #fff url(../_media/images/layout/underline.gif) repeat-x bottom left;
	clear: both;
	margin-top: 1em;
}
h4{
	font-size: 1.5em;
	padding-bottom: 2px;
	border-bottom: 2px solid;
	clear: both;
	margin-top: .5em;
}
p{
	font-size: 1.2em;
	line-height: 1.5em;
	color: #666;	
}
ul, li{margin: 0; padding: 0; list-style-type: none;}
a{
	text-decoration: none;
	color: #FF6600;
	border-bottom: 1px dashed;
}
a:hover{
	color: #FF9900;	
}
dl{
	font-size: 1.2em;
}
dt{
	font-weight: bold;
	margin-top: 10px;	
	border-top: 1px solid;
}
dd{
	margin-left: 50%;
	color: #666666;
}
dl>dt:first-child{
	border: 0;
}
strong{
	color: #FF6600;
}
blockquote{
	background: #fff url(../_media/images/layout/quote_bg.png) no-repeat top left;
	padding: 1em 3em 1em 4em;
	margin: 1em;	
	margin-left: .5em;	
	position: relative;
	color: #666666;
	clear: both;
	display: block;
	line-height: 1.5;
}
blockquote p{
	color: #339999;
	margin: 0;
	font-size: 1em;
	text-align: right;
	border: 0;	
	border-right: 2px solid;	
	padding: .5em;		
}
strong{
	font-size: 110%;
	line-height: 110%;
}


/*------------------------------------------------------
					STRUCTURAL ELEMENTS
-------------------------------------------------------*/

#wrapper{
	width: 659px;	
	background: #fff url(../_media/images/layout/content_bg.png) repeat-y top left;
	margin: 0 auto;
}
#masthead{
	height: 105px;	
	background: #33CCCC url(../_media/images/layout/header.jpg) no-repeat top left;
}
#masthead h1{
	margin-left: -1600px;
}
#content{		
	margin: 3em;	
	margin-top: 0;
	padding-top: 80px;
	background: #fff url(../_media/images/layout/underDrop.png) no-repeat top left;
	text-align: left;
	min-height: 400px;	
	z-index: 0;	
}
##content{
	height: 400px;
}
#footer{
	height: 50px;	
	background: url(../_media/images/layout/footer_bg.jpg) no-repeat bottom left;	
	clear: both;
	padding: 0;
	margin: 0;
	padding-top: 40px;	
}
#centered{	
	text-align: center;
	margin-top: -100px;
	margin-left: -150px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 200px;	
	padding: 10px;
	border: 1px dashed;	
	background-color: #FFCC99;
}
#callout{
	float: right;
	text-align: center;
	margin: .5em;	
	width: 210px;
	height: 180px;
	padding: 10px 35px 10px 20px;
	background: #fff url(../_media/images/layout/callout_bg.png) no-repeat top left;
	font-size: 1.3em;
	color: #20716F;
	font-family: Trebuchet MS, Georgia;
}

/*------------------------------------------------------
					FORM ELEMENTS
-------------------------------------------------------*/

form{
	margin: 0;
	padding: 0;
}
label{
	font-weight: bold;
	display: block;
}
input{
	font-size: 90%;
}
text-area{
	font: 1em Trebuchet MS, Arial, Sans;
}


/*------------------------------------------------------
					NAV ELEMENTS
-------------------------------------------------------*/

#nav{	
	height: 30px;
	text-align: center;	
	margin: 0;	
	padding: 0;	
	position: relative;
	z-index: 50;		
	padding: 0 15px;
}
#nav ul{
	display: block;
	margin: 0;
	padding: 0;
	clear: both;			
	text-align: center;
}
#nav li{
	margin: 0;
	padding: 0;
}
#nav-global{	
	background: #fff url(../_media/images/layout/nav_off.gif) repeat-x top left;
	clear: both;
	height: 30px;		
}
#nav-global li{
	float: left;
	width: 118px;
	height: 30px;
	text-align: center;
	margin: 0;
}
##nav-global li{
	width: 120px;
}
#nav-global a{
	font-size: 1.2em;
	font-weight: bold;
	display: block;	
	border: 0;
	border-left: 1px solid;	
	padding: .2em;
	color: #009999;	
	margin: 0;		
}
##nav-global a{
	width: 97%;
}
#nav-global a:hover{
	color: #fff;	
	background: #fff url(../_media/images/layout/nav_on.gif) repeat-x top left;
	border-left: 1px solid #025B57;	
}
#nav-global a.first{
	border-left: 0;
}
#nav-global a.first:hover{
	border-left: 0;
}
/*------------------------------------------------------
					SUBNAV ELEMENTS
-------------------------------------------------------*/
#nav-sub{	
	position: relative;	
	z-index: 60;
	margin: 0;
	padding: 0;
	display: block;	
	height: 0px;
}
#nav-sub ul{		
	border: 1px solid;
	width: 118px;
	background: #fff url(_media/images/layout/sub_bg.gif) repeat-y top left;
	border: 1px solid #FF6600;	
	float: left;	
	clear: none;		
	/* X-browser Opacity */	
	filter:alpha(opacity: 90);
  	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
  	-moz-opacity: 0.9;	
}
##nav-sub ul{
	width: 120px;	
	margin: 0;
	padding: 0;
}
#nav-sub li{
	margin: 0;
	padding: 0;
	margin-bottom: 2px;
	text-align: center;
}
#nav-sub a{
	border-bottom: 1px dashed;	
	font-size: .95em;	
	/*display: block;*/
}

#sub-about, #sub-classes, #sub-benefits, #sub-contact{
	position: absolute;
	top: 0;
	left: 0;
}

/* MOZ Version */
#sub-about{
	left: 120px;
}
#sub-classes{
	left: 236px;
}
#sub-benefits{
	left: 356px;
}
#sub-contact{
	left: 470px;
}

/* IE VERSION */
##sub-about{
	left: 124px;
}
##sub-classes{
	left: 246px;
}
##sub-benefits{
	left: 366px;
}
##sub-contact{
	left: 492px;
}
/*------------------------------------------------------
					PHOTOGRAPHS
-------------------------------------------------------*/

#photosection{
	text-align: center;
	margin: 0;
}
#photosection img{
	margin: 1em;
	padding: .5em;
	border: 1px solid;
	background: #efefef;
}


/*------------------------------------------------------
					FOOTER ELEMENTS
-------------------------------------------------------*/

#footer ul{
	text-align: center;
	margin: 0 10%;
	border-top: 1px solid #009999;
}
#footer ul li{
	float: left;
	width: 20%;	
}
#footer a{
	font-size: 1em;
	color: #009999;
	text-decoration: none;
	border: 0;
}

/*------------------------------------------------------
					CLASSES
-------------------------------------------------------*/

.larger{
	font-size: 110%;
	line-height: 110%;
}
.toTop{
	font-size: 10px;
	font-weight: normal;
	font-family: Verdana;
	padding-left: 28px;
	display: block;
	height: 20px;
	line-height: 20px;
	background: #fff url(../_media/images/layout/toTop.png) no-repeat top left;
	border: 0;	
	float: right;
}


/*------------------------------------------------------
					SIFR Styles
-------------------------------------------------------*/


/* This goes in the stylesheet to hide the browser text before it is replaced */

.sIFR-hasFlash h1 {
	visibility: hidden;
}

.sIFR-hasFlash h2 {
	visibility: hidden;
	letter-spacing: -9px;
	font-size: 55px;
}

.sIFR-hasFlash h3 {
	visibility: hidden;
	letter-spacing: -6px;
	font-size: 25px;
}
/*
.sIFR-hasFlash h4 {
	visibility: hidden;
	letter-spacing: -5px;
	font-size: 21px;
}
*/
.sIFR-hasFlash h5#pullquote {
	letter-spacing: -4px;
	visibility: hidden;
	font-size: 24px;
}

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}