/*
BILMAG site specific styles

NOTES:
	You should generally avoid box-model properties in this file, esp. width, padding and margins!
	If you still find it appropriate, consider all consequences!
	
	When targeting less specific elements, take care when using shorthand properties.
	It's usually better to be verbose on this level, thus allowing us to override globally
	in base.css.
	(obviously, shorthand here can conversely be used to override completely, if necessary.)
	
	NEVER apply location specific rules in here, eg. #location .element {property: value;} !!!
	If you need to apply such rules, you should add another class to the element itself, and consider
	if that (new) classname can "live" on its own. (thus being usable in another context, outside your #location)

TO-DO:
	* Get all cosmetics styles from chrome.css and content.css sheets in here!
	* Define generic link styles/colors - remember :visited !
*/
/* @group Misc. */
.info {background: #dcedf4; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.imgCaption {background-color: #222; color: #fff; border-top: 1px solid #444;}

.columnListHighlight {border-top: 1px solid #ccc; background-color: #29434f;}

.calloutBrandPage {
	float: left; display: inline;
	margin: 10px 0; padding: 5px 10px;
	background: #DCEDF4;
	font-size: 1.1em;
	border: 1px solid #09729F;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
	}
	/* Brand logos */
	.calloutBrandPage span {display: block;}
		.calloutBrandPage .imgLink {
			margin: 5px 5px 0 0; padding: 3px;
			border: 1px solid;
			background: #fff;
			
			-moz-box-shadow: 2px 2px 2px; -webkit-box-shadow: 2px 2px 2px #09729F; box-shadow: 2px 2px 2px;
			}
/* @end */

/* @group Typography */
a { color:#09729F; }
a:visited {color: #6a93a5;}
a:hover {text-decoration: none; color: #29434F;}

.callout {color: #6A93A5; font-size: 1.2em;}
a.callout:visited {color: #09729f;}

.box .callout {float: right; display: inline;} /* TO-DO: Abstract this? Could be another classname, instead of location specific selector??! */

.tabs a:visited {color: #fff;}

/* @group Headers */
.headerPrimary 	{letter-spacing: -0.04em;}
.headerSecondary {padding: 5px 0;}

.headerCallout,
.headerSection { font-size: 1.4em; color: white; background:#29434F url(../gfx/boxheader_gradient.jpg) repeat-x; padding: 3px 5px;}
	.headerCallout a,
	.headerSection a { color: white; }
/* @end */

/* @end */

/* @group Classifieds */
.classifieds {clear: both; width: 620px;}
	.classifieds .classified { float: left; width: 190px; margin: 1px 1px 10px; padding: 5px; background-color:#FFF2C0; line-height: 1.6em;}
	.classifieds .classified + .classified {float: right;}
	
		.classified em { background: none; border-top:1px solid #EADEB1; display:block; font-style:normal; margin:4px 8px 0 0; padding:4px 4px 0 0; text-align:right;} 
			.classified em a { font-weight:bold; text-decoration:underline; white-space:nowrap; }
	
		.classified img { margin-bottom: 4px; }
		.classified strong { display:block; font-size:1.2em; }
			.classified strong a { text-decoration: underline; }
	
		.classified p { font-size:1.1em; padding-bottom:4px; }
		.classified .classifiedInformer { color:#B9B9B9; display: block; text-align: right; font-size:0.9em; letter-spacing:0.1em; padding-right:4px; }
/* @end */

/* @group Widgets */

	/* @group Rotator */
		.widget_article_rotator .tabList li + li {border-color: #fff; }
		.widget_article_rotator .tabList li a { background: #36525e url(../gfx/boxheader_gradient_big.gif) repeat-x; color: #fff; }
		.widget_article_rotator .tabList li.selected a,
		.widget_article_rotator .tabList li a:hover { background: #28434f; text-decoration: none; }
			.widget_article_rotator .tabList li a strong { font-weight: normal; }

		.widget_article_rotator .stay_right .textWrapper:hover .header { color: #FB7804;}
	/* @end */

	/* @group Car search */
	.widget_car_search .header {margin: 0; background-repeat: no-repeat; background-position: right bottom; color: #fff;}
		.widget_car_search .header em {font-style: normal; color: #fb7804;}

	.widget_car_search_new .header {padding: 35px 160px 5px 5px; background-image: url(../gfx/headerCarSearch_new.jpg);}
	.widget_car_search_used .header {padding: 35px 150px 5px 5px; background-image: url(../gfx/headerCarSearch_used.jpg);}
	/* @end */

	/* @group Featured Areas */
	.widget_featured_area .columnList {border: 0; background: transparent;}
	.widget_featured_area .headerCallout {padding: 5px 10px;}

	.widget_featured_area_tests {background: #29434F;}
		.widget_featured_area_tests .featureArchives {background: #21363f; border-color: #000;}

		.widget_featured_area_tests .columnListHighlight li > a span {background-image: url(../gfx/testIcon.png); left: 2.5%; top: 15%; background-position: left top;}
			.widget_featured_area_tests .columnListHighlight li > a span strong {display: none;}
			.widget_featured_area_tests .columnListHighlight li > a:hover span strong {display: inline;}

	.widget_featured_area_videos {background: #b20a23;}
		.widget_featured_area_videos .date {color: #560814;}
		.widget_featured_area_videos .headerCallout {background: url(../gfx/header_red_gradient.jpg) repeat-x left bottom; border-bottom: 1px solid #560814;}
		.widget_featured_area_videos .featureArchives {background-color: #8f0a1d; border-color: #560814;}

		.widget_featured_area_videos .columnListHighlight li > a span {background-image: url(../gfx/playIcon.png);}
			.widget_featured_area_videos .columnListHighlight li > a span strong {display: none;}
			.widget_featured_area_videos .columnListHighlight li > a:hover span strong {display: inline;}
	/* @end */
/* @end */