﻿/*---- JOOST COMMON -------------*/
img{border:none}

.main{height:auto; padding:10px 0px 65px 0px}
.roundedContent{margin:0px auto; color:#333}
.leftColumn{float:left; display:inline; padding:0px 0px 15px 0px}
.boxContent{border-left:1px #ccc solid; border-right:1px #ccc solid}
.boxTop{border-top:1px #ccc solid; border-left:1px #ccc solid; border-right:1px #ccc solid; height:8px; line-height:0px}
.boxBtm{border-bottom:1px #ccc solid; border-left:1px #ccc solid; border-right:1px #ccc solid; height:8px; line-height:0px}
.bc{position:relative; width:8px; height:8px; font-size:1px; background-repeat:no-repeat; margin-bottom:-1px; z-index:2; line-height:0px}
.ctr{float:right; background-image:url(images/layout/ctr.gif); margin-right:-1px; margin-top:-1px; line-height:0px}
.ctl{float:left; background-image:url(images/layout/ctl.gif); margin-left:-1px; margin-top:-1px; line-height:0px}
.cbr{float:right; background-image:url(images/layout/cbr.gif); margin-right:-1px; margin-top:1px; line-height:0px}
.cbl{float:left; background-image:url(images/layout/cbl.gif); margin-left:-1px; margin-top:1px; line-height:0px}

.roundedContent{}
.roundedContent{color:#333}
.centerColumnHome .columnContent{padding:0px; width:520px}
.padding{padding:0px 10px; margin:-9px 0px}

/*---- JOOST Image with black Opaque div -------------*/
/*---Image box Constant settings --*/
.roundedContent .teaserBox .boxContent{}

.roundedContent .teaserBox .teaserDescription_300_100 h2 a, 
.roundedContent .teaserBox .teaserDescription_300_150 h2 a, 
.roundedContent .teaserBox .teaserDescription_300_200 h2 a, 
.roundedContent .teaserBox .teaserDescription_300_300 h2 a
{color:#373839; text-decoration:none}

.roundedContent .teaserBox .teaserDescription_300_100 h2 a:hover, 
.roundedContent .teaserBox .teaserDescription_300_150 h2 a:hover, 
.roundedContent .teaserBox .teaserDescription_300_200 h2 a:hover, 
.roundedContent .teaserBox .teaserDescription_300_300 h2 a:hover
{color: #54534a; text-decoration:underline}

.roundedContent .teaserBox .teaserDescription_300_100 p, 
.roundedContent .teaserBox .teaserDescription_300_150 p, 
.roundedContent .teaserBox .teaserDescription_300_200 p, 
.roundedContent .teaserBox .teaserDescription_300_300 p
{color:#fff; margin:0px; padding:0px}
.roundedContent .teaserBox .teaserBoxPadding_inner
{position:absolute; top:-8px}

.roundedContent .teaserBox .padding{padding:0px; margin:0px}
.roundedContent{}
/*-------------------------------------------
----------IMAGE BOX 300 x 200----------------
--------------------------------------------*/
.centerColumnHome .columnContent_300_200{padding:0px; width:302px}
.roundedContent .teaserBox .teaserBoxPadding_outer_300_200{position:relative; height:183px; /*--CUSTOM:this will adjust the height of the whole box---*/}
.roundedContent .teaserBox .teaser_300_200{height:203px; /*---CUSTOM:height that adjusts the horiz position of the black background---*/margin:0px; background-color:#fff}
.roundedContent .teaserBox .teaserDescription_300_200{position:absolute; bottom:0px; height:60px; /*---CUSTOM:height of the black content within the background---*/z-index:3; width:100%; padding:0px 0px 0px 10px; margin:0px}
.roundedContent .teaserBox .teaserDescriptionBackground_300_200{position:absolute; bottom:3px; height:60px; /*---CUSTOM:height of the black background---*/z-index:2; width:100%; /*---CUSTOM:width of the black background---*/padding:0px; margin:0px; background-color:#949484; filter:alpha(opacity=90); -moz-opacity:.90; opacity:.90}
.roundedContent .teaserBox .teaserDescription_300_200 .padding_300_200{width:285px; padding-top:0px; padding-left:3px; padding-bottom:5px; padding-right:0px}
.roundedContent .teaserBox .teaserDescription_300_200 h2{font-size:1.0em; /*---CUSTOM:Sets size of font in title---*/font-weight:bold; margin:0px; padding:0px}
.roundedContent .teaserBox .teaserDescription_300_200 p{color:#fff; font-size:.80em; /*---CUSTOM:Sets size of font in body---*/font-weight:bold; margin:0px; padding:0px; line-height:14px}
/*-------------------------------------------
----------IMAGE BOX 300 x 100----------------
--------------------------------------------*/
.centerColumnHome .columnContent_300_100{padding:0px; width:302px; /*---CUSTOM:width of whole container---*/}
.roundedContent .teaserBox .teaserBoxPadding_outer_300_100{position:relative; height:83px; /*--CUSTOM:this will adjust the height of the whole box---*/}
.roundedContent .teaserBox .teaser_300_100{height:100px; /*---CUSTOM:height that adjusts the horiz position of the black background---*/margin:0px; background-color:#fff}
.roundedContent .teaserBox .teaserDescription_300_100{position:absolute; bottom:0px; height:40px; /*---CUSTOM:height of the black background---*/z-index:3; width:300px; padding:0px; margin:0px}
.roundedContent .teaserBox .teaserDescriptionBackground_300_100{position:absolute; bottom:3px; height:40px; /*---CUSTOM:height of the black background---*/z-index:2; width:300px; /*---CUSTOM:width of the black background---*/padding:0px; margin:0px; background-color:#000; filter:alpha(opacity=60); -moz-opacity:.60; opacity:.60}
.roundedContent .teaserBox .teaserDescription_300_100 .padding_300_100{padding-top:0px; padding-left:3px; padding-bottom:5px; padding-right:0px}
.roundedContent .teaserBox .teaserDescription_300_100 h2{font-size:75%; /*---CUSTOM:Sets size of font in title---*/font-weight:bold; margin:0px; padding:0px}
.roundedContent .teaserBox .teaserDescription_300_100 p{color:#fff; font-size:75%; /*---CUSTOM:Sets size of font in title---*/font-weight:bold; margin:0px; padding:0px}
/*-------------------------------------------
----------IMAGE BOX 300 x 225----------------
--------------------------------------------*/
.centerColumnHome .columnContent_300_225{padding:0px; width:302px; /*---CUSTOM:width of whole container---*/}
.roundedContent .teaserBox .teaserBoxPadding_outer_300_225{position:relative; height:209px; /*--CUSTOM:this will adjust the height of the whole box---*/}
.roundedContent .teaserBox .teaser_300_225{height:100px; /*---CUSTOM:height that adjusts the horiz position of the black background---*/margin:0px}
.roundedContent .teaserBox .teaserDescription_300_225{position:absolute; bottom:0px; height:80px; /*---CUSTOM:height of the Content within black background---*/z-index:3; width:100%; padding:0px; margin:0px}
.roundedContent .teaserBox .teaserDescriptionBackground_300_225{position:absolute; bottom:3px; height:80px; /*---CUSTOM:height of the black background---*/z-index:2; width:100%; /*---CUSTOM:width of the black background---*/padding:0px; margin:0px; background-color:#000; filter:alpha(opacity=60); -moz-opacity:.60; opacity:.60}
.roundedContent .teaserBox .teaserDescription_300_225 .padding_300_225{padding-top:0px; padding-left:3px; padding-bottom:5px; padding-right:0px}
.roundedContent .teaserBox .teaserDescription_300_225 h2{font-size:115%; /*---CUSTOM:Sets size of font in title---*/font-weight:bold; margin:0px; padding:0px}
.roundedContent .teaserBox .teaserDescription_300_225 p{color:#fff; font-size:100%; /*---CUSTOM:Sets size of font in title---*/font-weight:bold; margin:0px; padding:0px}

/*-------------------------------------------
----------IMAGE BOX 130 x 100----------------
--------------------------------------------*/
.centerColumnHome .columnContent_130_100{padding:0px; width:132px; /*---CUSTOM:width of whole container---*/}
.roundedContent .teaserBox .teaserBoxPadding_outer_130_100{position:relative; height:84px; /*--CUSTOM:this will adjust the height of the whole box---*/}
.roundedContent .teaserBox .teaser_130_100{height:100px; /*---CUSTOM:height that adjusts the horiz position of the black background---*/margin:0px}
.leftColumnWide .columnContent{padding:0px 0px 15px 0px; width:614px}
