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

#container-1 p {color: #000000; line-height: 18px; padding-bottom: 10px;}
	
#product-1 .screenshot {	float:right; margin-top:30px; padding-right: 1px;}
#product-1 .text {	width: 450px; padding: 10px 0 0 30px; float:left; text-align: left;}

#product-2 .screenshot {	float:right; margin-top:30px; padding-right: 1px;}
#product-2 .text {	width: 450px;	padding: 10px 0 0 30px; float:left; text-align: left;}

#product-3 .screenshot {	float:right; margin-top:30px; padding-right: 1px;}
#product-3 .text {	width: 450px;	padding: 10px 0 0 30px; float:left; text-align: left;}

#product-4 .screenshot{	float:right; margin-top:30px; padding-right: 1px;}
#product-4 .text {	width: 450px;	padding: 10px 0px 0 30px; float:left; text-align: left;}

#product-2,#product-3,#product-4 {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: #ffffff url(/assets/bgrpt_tabswhite.gif) repeat-y top left;
	width: 900px;
	padding: 0;
	margin: 0;
	min-height:362px; /* NOT SURE IF THIS NEEDS TO BE ADJUSTED */
}

.fragment1,.fragment2,.fragment3,.fragment4 { min-height: 277px;} /* NOT SURE IF THIS NEEDS TO BE ADJUSTED */
.fragment2,.fragment3,.fragment4 { 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_clickplanner_on.gif) top left no-repeat; width: 228px;}
.anchors .tab2 {	background: url(/assets/tab_clickhr_on.gif) top left no-repeat; width: 228px;}
.anchors .tab3 {	background: url(/assets/tab_clickassets_on.gif) top left no-repeat; width: 228px;}
.anchors .tab4 {	background: url(/assets/tab_comingsoon_on.gif) top left no-repeat; width: 216px;}

.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_clickplanner_off.gif) top left no-repeat; width: 228px; position:static;}
.anchors .tab2 a:link, .anchors .tab2 a:visited { background: url(/assets/tab_clickhr_off.gif) top left no-repeat; width: 228px; position:static;}
.anchors .tab3 a:link, .anchors .tab3 a:visited { background: url(/assets/tab_clickassets_off.gif) top left no-repeat; width: 228px; position:static;}
.anchors .tab4 a:link, .anchors .tab4 a:visited { background: url(/assets/tab_comingsoon_off.gif) top left no-repeat; width: 216px; position:static;}

.anchors .tab1 a:hover { background: url(/assets/tab_clickplanner_on.gif) top left no-repeat; width: 228px; position:static;}
.anchors .tab2 a:hover { background: url(/assets/tab_clickhr_on.gif) top left no-repeat; width: 228px; position:static;}
.anchors .tab3 a:hover { background: url(/assets/tab_clickassets_on.gif) top left no-repeat; width: 228px; position:static;}
.anchors .tab4 a:hover { background: url(/assets/tab_comingsoon_on.gif) top left no-repeat; width: 216px; 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_clickplanner_on.gif) top left no-repeat; width: 228px;}
.anchors .tabOn2 {	background: url(/assets/tab_clickhr_on.gif) top left no-repeat; width: 228px;}
.anchors .tabOn3 {	background: url(/assets/tab_clickassets_on.gif) top left no-repeat; width: 228px;}
.anchors .tabOn4 {	background: url(/assets/tab_comingsoon_on.gif) top left no-repeat; width: 216px;}