.clear {
	clear: both;
	height: 0px;
	font-size: 0px;
	line-height: 0px;
}

#container-1 p {color: #000000; line-height: 18px; padding-bottom: 10px;}
	
#product-1 .text {	width: 838px; padding: 10px 0 0 30px; text-align: left;}
#product-2 .text {	width: 838px;	padding: 10px 0 0 30px; text-align: left;}
#product-3 .text {	width: 838px;	padding: 10px 0 0 30px; text-align: left;}


#product-2,#product-3 {display:none;}

.text ul, .text ul, .text ul, .text ul {
	margin: 0px 0px 20px 7px;
	padding: 0px 0px 0px 7px;
}

/* Tabs - important styles to ensure accessibility in print */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
        display: none;
    }
}
@media print {
    .anchors {
        display: none;
    }
}


/* Tabs - not important for accessibility, just for the look of it... */
#container-1 {
	background:#F0F6FD url(/assets/bgrpt_tabsblue.jpg) repeat-y top left;
	width: 900px;
	padding: 0;
	margin: 0;
	min-height:362px; /* NOT SURE IF THIS NEEDS TO BE ADJUSTED */
}

.fragment1, .fragment2, .fragment3 { min-height: 277px;} /* NOT SURE IF THIS NEEDS TO BE ADJUSTED */
.fragment2, .fragment3 { display:none;}

.anchors {list-style: none; margin: 0; padding: 0; height: 66px;}
.anchors li { margin: 0; float: left;}

/* attaching active state to background of li for pre-loading */
.anchors .tab1 {	background: url(/assets/tab_whyclickplanner_on.gif) top left no-repeat; width: 228px;}
.anchors .tab2 {	background: url(/assets/tab_whyclickhr_on.gif) top left no-repeat; width: 228px;}
.anchors .tab3 {	background: url(/assets/tab_whyclickassets_on.gif) top left no-repeat; width: 228px;}

.anchors a {display: block; position: relative; top: 0px; left:0; z-index: 2; padding: 0px; color: #000; height: 66px;}

/* Tab Rollovers */
.anchors .tab1 a:link, .anchors .tab1 a:visited { background: url(/assets/tab_whyclickplanner_off.gif) top left no-repeat; width: 228px; position:static;}
.anchors .tab2 a:link, .anchors .tab2 a:visited { background: url(/assets/tab_whyclickhr_off.gif) top left no-repeat; width: 228px; position:static;}
.anchors .tab3 a:link, .anchors .tab3 a:visited { background: url(/assets/tab_whyclickassets_off.gif) top left no-repeat; width: 228px; position:static;}

.anchors .tab1 a:hover { background: url(/assets/tab_whyclickplanner_on.gif) top left no-repeat; width: 228px; position:static;}
.anchors .tab2 a:hover { background: url(/assets/tab_whyclickhr_on.gif) top left no-repeat; width: 228px; position:static;}
.anchors .tab3 a:hover { background: url(/assets/tab_whyclickassets_on.gif) top left no-repeat; width: 228px; position:static;}

/* Makes the text disappear */
.anchors span {display:block; height:0; width:0; overflow: hidden; font-size: 1px; color: #C6DEF9;}

.anchors .tabOn1 {	background: url(/assets/tab_whyclickplanner_on.gif) top left no-repeat; width: 228px;}
.anchors .tabOn2 {	background: url(/assets/tab_whyclickhr_on.gif) top left no-repeat; width: 228px;}
.anchors .tabOn3 {	background: url(/assets/tab_whyclickassets_on.gif) top left no-repeat; width: 228px;}

/* below was added by Richard */
#product-1, #product-2, #product-3
{
	padding-bottom: 5px;
	border-bottom: 1px solid #ace;
}