#container{
	position: relative;
}


#wrap   {
        min-height:1000px;
	margin-left:50%;
        height:auto !important;
        height: 1000px;
        position: relative;
	width:1000px;
        padding: 0px 0px 20px 0px;
	margin:0 auto;
	background: url(background.gif) repeat-y;
	}

body{
	margin:0px auto;
	font-family:Arial, "Trebuchet MS",Arial, Helvetica, sans-serif;
	font-size:1.2em;
	color:#06659f;
	font-weight:normal;
	padding:0;
	font-size:12px;
	}


/*left column*/

#buynow {
	position:absolute;
	top:-24px;
	left:790px;
}
#flash{
	position:relative;
	top:0px;
	left:4px;
	z-index:0;
}

.csc-header h4{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.5em;
	text-align:left;
	color:#0000ff;
	font-weight:normal;
	background: url(dog.gif) no-repeat; 
	margin:0px 0px 0px 0px;
	padding: 27px 0px 13px 60px;
	}

.csc-header h3{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.5em;
	color:#0000ff;
	text-align:left;
	font-weight:normal;
	background: url(dude2.gif) no-repeat; 
	margin:0px 0px 0px 0px;
	padding: 27px 0px 13px 60px;
	}

.csc-header h2{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.5em;
	color:#0000ff;
	text-align:left;
	font-weight:normal;
	background: url(girl.gif) no-repeat; 
	margin:0px 0px 0px 0px;
	padding: 25px 0px 13px 52px;
	}

.csc-header h1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.5em;
	color:#0000ff;
	text-align:left;
	font-weight:normal;
	background: url(hunter.gif) no-repeat; 
	margin:0px 0px 0px 0px;
	padding: 20px 0px 13px 60px;
	}

#footer {
        position: absolute;
        bottom: 0;
        left: 10px;
        width: 980px;
        border:#0000FF solid 2px;
        margin: 30px 0 0 0;
        border-width: 0px 0px 0px 0px;
        padding: 30px 0px 10px 0px;
        color: red;
        font-family:sans-serif, arial;
        font-size:12px;
        text-align:center;
}

.pic{
	vertical-align: top;
	float:right;
	border:#0000FF solid 0px;
	padding: 0px 0px 0px 25px;
	width: 240px;
}
.csc-textpic-caption{
	float:top;
	top: 0px;
	font-family:sans-serif, arial;
	font-size:11px;
	font-weight:normal;
	margin: 0px 0px 0px 0px;
	padding: 5px 0px 0px 0px;
	color:red;
        line-height: 100%;
	}

#cards{
	position:absolute;
	top:240px;
	left:38px;
	}

#storytellers {
	position: absolute;
	top: 22px;
	left: 20px;
}

#quote p{
	position:absolute;
	top:48px;
	left:10px;
	height:100px;
	width:230px;
	line-height: 28px;
	border: none;
	font-style: italic;
	font-weight:500;
	font-size: 15px;
	font-family: "New Century Schoolbook", Times, serif;
	color: #3b4046;
	letter-spacing: 0.2em;
	vertical-align: bottom;
	word-spacing: normal; 
	text-align: right; 
	}
	
#col1{
	vertical-align:top;

}

p {
        padding: 0 0 13px 0; 
        margin: 0 0 0 0;
	font-size:17px;
	text-align:justify;
}

#contentleft {
	position:absolute;
	align: right;
	top:25px;
	left:10px;
	min-height:600px;
	width:245px;
	border-right:#0000FF dotted 2px;
	font-size:1.1em;
	line-height: 30px;
	letter-spacing: 0em;
	text-align:justify;
	color:ffffff;
	}

#contentright {
	position:relative;
	top:20px;
	left:305px;
	width:635px;
	color:#333333;
	font-size:1.1em;
	line-height: 20px;
	letter-spacing: 0em;
	text-align:justify;
        overflow:hidden;
        margin: 0px 0 60px 0;
	}

#contentarea {
	position:relative;
	top:0px;
	left:5px;
	width:980px;
	color:#3b4046;

	}

#flash_left {
	position:relative;
	top: 0px;
	left: 10px;
}
	
/*lists*/

	
#menu_loc {
	position:absolute;
	top:240px;
	left:01px;
	width:250px;
	height:540px;
	font-size:140%;
	margin:25px 0 50px 15px; /* this page only */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
	position:relative;
	width:230px;
	padding:0;
	margin:0;
	list-style-type:none;
}

/** not sure about this
.menu li li ul{ 
        top:0px;
        margin: 9px 0px 0px 0px;
	width:180px;

}
**/

/** affects all levels **/

.menu li, .menu li.sfhover {
	background: url(slide5.gif);
	margin: 0px 0px 15px 0px;
	width:230px;
	height:43px;
	/* for IE7  but causes IE6 to crash  */
	float:left; 
}
.menu[class] li {
	background: url(slide5.png);
	margin: 5px 0px 7px 0px;
	width:230px;
	height:43px;
	/* for IE7  but causes IE6 to crash 
	float:left; */
}


/*
.menu li.sub {
	background: url(slide4.gif);
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='slide5.png', sizingMethod='scale'); 
} 
*/

/* effects second menu hover */
.menu li.sub li:hover {
	background: url(slide_right_hover.gif);
	width:170px;
} 

/* second level li */
.menu li.sub li{
	background:url(slide_right_hover.gif);
	width:170px;
} 

.menu li.sub li a{
	text-indent: 5px;
	width:170px;
} 

/*li button, first level that leads to second level */
.menu[class] li.sub {
	background:url(slide5.png);
} 

/* IE 6 here */
.menu li.sub {
	width:230px;
} 

	/* get rid of the table */
	.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

	/* style the links */
.menu a, .menu a:visited {
		display:block; 
		text-decoration:none;
		height:43px;
		line-height:39px;
		width:230px;
		color:#0000FF;
		vertical-align: middle;
		text-indent:65px;
		border:2px solid #fff;
		border-width:0 0px 0px 0px;
	}

/* hack for IE5.5  */
* html .menu li li a, * html .menu li li a:visited {
	width:230; 
	text-indent:5px;
	w\idth:170px;
} 

* html .menu a, * html .menu a:visited {
	width:230; 
	w\idth:230px;
} 
/* style the link hover  */
* html .menu a:hover {
	color:red; 
	position:relative;
} 


/*
.menu li li:hover, .menu li li.sfhover{
	position:relative;
	background: url(slide_right_hover.gif);
}
*/

/* FF & IE 6 - third level hover */
.menu li li li:hover, .menu li li li.sfhover{
	position:relative;
        width: 170px;
	background: url(slide_right_hover.gif);
}

/*active in IE6 only it seems */
.menu li:hover, .menu li.sfhover{
	position:relative;
	background: url(slide6.gif);
}

/*first level hover state*/
.menu[class] li:hover, .menu[class] li.sfhover{
	position:relative;
	background: url(slide6.png);
}

	/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus {
	color:#000; 
}

	/* trial for 3rd level menu */
.menu li li:hover > a {
	color:#ffff00; 
	left: 150px;
	/*background:#aa7; */
	width:170px;
}

	/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a {
	color:#ffff00; 
	left: 200px;
	/*background:#aa7; */
	width:230px;
}
	 
	/* hide the sub levels and give them a positon absolute so that they take up no room */
/* FF second level .li state - not hover*/
.menu li ul {
		visibility:hidden;
                position:absolute;
		top:-5px;
		/* set up the overlap (minus the overrun) */
		left:232px;
		/* set up the overrun area */
		padding:0px;
		/* this is for IE to make it interpret the overrrun padding */
		/*background:transparent url(transparent.gif);*/
	}

/*same as above but now this is for third level  - does not affect IE6 */
.menu li li ul {
		visibility:hidden;
		position:absolute;
		/* set up the overlap (minus the overrun) */
		left:170px;
		/* set up the overrun area */
		padding:0px;
		/* this is for IE to make it interpret the overrrun padding */
		/*background:transparent url(transparent.gif);*/
	}


	/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul {
	visibility:visible;
}


	/* for IE5.5 and IE6 you need to style each level hover */

	/* make the second level visible when hover on first level link */
.menu ul a:hover ul {
	visibility:visible;
	}

.csc-frame-frame1 {
        background: #C5C1B9;
        padding: 13px 13px 13px 0px;
	font-size:17px;
        font-family: "Trebuchet MS",Arial,Helvetica,sans-serif
}

.contenttable p{
      font-size:80%;
      padding: 0 0 0 0;
}

#flash2 {
	position: absolute;
	left: 70px;
	top: 140px;
}