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

body {
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	line-height:20px;
	text-align:justify;
}
a:hover, a:link, a:visited, a:active {
	text-decoration:none;
	color:#858585;
}
.container_grid {
	width: 760px;
	margin:auto;
}
.header {
	clear:both;
}
.header h2 {
	text-indent:-5000px;
	height:193px;
	background:url(../images/randj.png) no-repeat;
	margin:0;
}
.navcol, .content {
	float:left;
}
.navcol {
	width:193px;
	margin-right:0px;
	font-size:14px;
	line-height:23px;
}
.navcol p {
	margin:0;
	padding:0;
}
/*
	background-image:url(../images/bar.gif);
	background-repeat:repeat-x;
	*/
.navcol a:hover {
	background-position: -89px 0px;
	color:#454545;
}
.navcol a {
	background-color:#FFF;
	height:22px;
	padding-right:20px;
}
.content {
	width:551px;
	padding-left:15px;
	border-left:solid 1px #eaeaea;
}
.content p, .content h3 {
	margin: 0 0 1em 0;
}
.content ul, .content li {
	list-style:none;
	margin:0;
	padding:0;
}
.mainimg {
	margin-bottom:1em;
}
.imgreplace a {
	/*text-indent:-50px;*/
}
.bottomp {
	margin-bottom:0 !important;
}
.footer {
	margin-bottom:40px;
}
/*.navstory, .navreed, .navjyll, .navchloe, .navphoto, .navmom, .navcontact {
	background-repeat:no-repeat !important;
	height:22px;
}
.navstory {
	background-image:url(../images/ourstory.png);
	width: 85px;
}
.navreed {
	background-image:url(../images/reed.png);
	width: 55px;
}
.navjyll {
	background-image:url(../images/jyll.png);
	width: 44px;
}
.navchloe {
	background-image:url(../images/chloe.png);
	width: 56px;
}
.navmom {
	background-image:url(../images/bmoms.png);
	width: 91px;
}
.navphoto {
	background-image:url(../images/photos.png);
	width: 67px;
}
.navcontact {
	background-image:url(../images/contact.png);
	width: 92px;
}*/
.selected a{
	background-position: -89px 0px;
	color:#454545;
}
.selected {
	background-image:url(../images/line.jpg);
	background-repeat:repeat-x;
	background-position: 0px 11px;
}
/* styling for the image wrapper  */
#image_wrap {
	/* dimensions */
	width:550px;

	/* centered */
	text-align:center;

	/* some "skinning" */
	-moz-ouline-radius:4px;
}
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 550px;
	height:102px;

	/* custom decorations */
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

.items div {
	float:left;
	width:550px;
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin:5px 20px 5px 0px;
	background-color:#fff;
	padding: 2px 0 2px 0;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	width:122px;
	height:75px;
	overflow:hidden;
}
.scrollable img.last {
	margin-right:0px !important;
	width:123px !important;
}

/* active item */
.scrollable .active {
	border-top:1px solid #858585;
	border-bottom:1px solid #858585;
	position:relative;
	cursor:pointer;
}
.scrollable img {
	cursor:pointer;
}

.outputframe {
	height:20px;
	margin-top: 1px;
	margin-bottom: 10px;
	padding-bottom: 0px;
	border-bottom: #999 solid 1px;
	font-weight:bold;
	color:#666;
}
.np {
	z-index:1500;
	height: 0px;
	/*position:relative;
	top:-79px;*/
}
#prev, #next {
	display: block;
	height:74px;
	width: 22px;
	cursor:pointer;
}
#prev {
	background-image:url(../images/np.png);
	float:left;
	position:relative;
	top: -93px;
}
#prev:hover {
}
#next {
	background-image:url(../images/np.png);
	background-position: right;
	float: right;
	position:relative;
	top: -93px;
	right: 2px;
}

.navi {
	margin:auto;
	width: 50px;
}
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background-color:#CCC;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-color:#999;      
}

/* active state (current page state) */
.navi a.active {
	background-color:#666;     
}
.toggle {
	display:none;
	
	background-color: #f6f6f6;
	margin-right: 14px;
}
.toggle input {
	background-color: #fdfdfd;
	border: none 0px;
	margin: 9px 9px 0 9px;
	width: 152px;
	color:#8a8a8a;
	font-size:12px;
	padding: 5px;
}
.toggle img {
	margin:9px;
}
.toggle textarea {
	font-family:Helvetica, Arial, sans-serif;
	line-height:20px;
	width:153px;
	margin: 9px;
	background-color: #fdfdfd;
	border: none 0px;
	resize:none;
	padding: 5px;
	color:#8a8a8a;
	font-size:12px;
	line-height:1.5em;
}
.submit {
	background-image:url(../images/send.jpg);
	background-repeat:no-repeat;
	padding:0;
	margin: 0 9px 7px 9px !important;
	width:161px !important;
	height: 32px;
	text-indent:-5000px;
	cursor:pointer;
}
.pcontent {
	height: 600px;
}
.done {
    display:none;
	
	background-color: #f6f6f6;
	margin-right: 14px;
}
.highlight {
	/*background-color:#faf0f0 !important;*/
	color: #faafaf !important;
}