/* FOUR SQAURE SCROLLER */
#four-square-scroller-container {margin: 0px 0 0px; width: 100%;}
#four-square-scroller {margin:0 auto; width: 1000px; height:215px; position: relative;}

#four-square-scroller .scrollable {

    /* required settings */
    position:relative;
    width: 1000px;
    height:215px;
	overflow: hidden;  
}


#four-square-scroller.scrollable .items {
    /* this cannot be too large */
	/* DANIEL 07/12/12: 
		The above comment is generated from the http://jquerytools.org/ download facility. For some reason it doesn't want the width to be too large but this can cause problems if there are too many Large (full width) slides */
    width:/*500*/ 50000em;
    position:absolute;
    clear:both;
}

#four-square-scroller.items div.slide {
    float:left;
    width:1000px;
}


/* this makes it possible to add next button beside scrollable */
#four-square-scroller.scrollable {
    float:left;
}

/* prev, next, prevPage and nextPage buttons */
#four-square-scroller a.browse {
    display:block;
    width:30px;
    height:30px;
    float:left;
    margin:40px 10px;
    cursor:pointer;
    font-size:1px;
	position: absolute;
	z-index:100;
	top:5px;
}

#four-square-scroller a.right {
    background: url("/img/_cms/next-icon.png") no-repeat scroll left top transparent;
    clear: right;
    height: 30px;
    margin: 0;
    padding: 0;
    right:0px;
    width: 30px;
	top:100px;

}

/* left */
#four-square-scroller a.left { background: url("/img/_cms/prev-icon.png") no-repeat scroll right top transparent;
    clear: right; height: 30px; left:0px; margin: 0; padding: 0;  width: 30px; top:100px;}

#four-square-scroller span.title {position: absolute; bottom:0; right: 0px; padding: 10px; background: #820D28; color:#fff; opacity: 0.8; font-size: 100%; line-height: 140%}

#four-square-scroller  span.heading{font-weight: bold; font-size: 110%; color: #372E66; margin: 10px 5px; display:block; text-align: left;}
#four-square-scroller a:hover {opacity: 0.8}

.header-four-square-scroller-title-text {background:url(/img/opacity70repeat.png) repeat; color:#00405D; position:absolute; width:355px; height:30px; padding:10px 0px 10px 15px; right:0; bottom:10px;}

.header-four-square-scroller-title {float:left; width:100%; clear:both; font-size:17px; line-height:17px; font-weight:bold; text-transform:uppercase;}
.header-four-square-scroller-text  {float:left; width:100%; clear:both; font-size:13px; line-height:13px; font-weight:bold;}


	.four-sq-title {position:relative; float:left; clear:both; width:970px; background:#5BA0DC; height:20px; padding:5px 0px 5px 30px; font-size:20px; line-height:20px; color:#FFFFFF;}
		.square{position:relative; float:left; margin:0; padding:0; width:250px; height:185px; background:#F7F7F7;}
		
		.square-title {position:absolute; left:0; z-index:1; bottom:0; opacity:0.9; color:#FFFFFF; padding:5px 60px 5px 30px;  width:160px; height:30px; }
		.square-title h3 {font-size:13px; color:#FFFFFF; line-height:13px; padding:0; margin:0;}