
#headBlock {
background:url("/graphics/ksl11/header-bkgd.jpg") no-repeat center top; 
background-color: #0b162f;
height:143px;

/* needed or header graphic floats - also breaks formating in iOS */
 min-width: 1024px; 
/* width: 1187px; */
position:relative;
overflow:visible;
margin:0 auto;
padding:0;
font-family:  Arial, Helvetica, sans-serif;
voice-family:inherit;
font-size:small;
border: 0;
}


@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

#headBlock {
background:url("/graphics/ksl11/retina-header-bkgd.jpg") no-repeat center top;
background-color: #0b162f;
-webkit-background-size: 1384px 143px ;
-moz-background-size: 100% 143px ;
background-size: 1384px 143px ;
	}

}


#headBlock p {
	margin: 9px 0px 9px 0px;
}

#headBlock a:link {
	text-decoration: none;
}

/*
#headBlock a  {
	color: #333;
}

#headBlock a:link {
	color:#333;
	text-decoration:none;
}

#headBlock a:visited { 
	color:#333; 
	text-decoration:none;
}


#headBlock a:visited:hover {
	color:#2354ac;
	text-decoration:underline;
}

#headBlock a:link:hover {
	color:#2354ac;
	text-decoration:underline;
}
*/

#headBlock .Channels {
	width: 984px;
	height: 20px;
	font-size: 11px;
	color: #fff;
	margin:0 auto;
	padding: 9px 0px 0px 0px;
}

#headBlock .arrow img {
	word-spacing:0px;
	margin: 0px 5px 0px -1px; 

}

#headBlock .utility {
	float: right;
	font-size: 11px;
}

#headBlock .utility a {
	color: #fff;
}

#headBlock .middle {
	width: 984px;
	height: 80px;
	color: #fff;
	margin: 0 auto;
}

#headBlock .bottom {
	width: 984px;
	height: 43px;
	color: #fff;
	margin: 0 auto;
}

#headBlock .logo {
	height:38px;
	width: 180px;
	float: left;

	padding: 15px 0px 0px 0px;

}


#headBlock .wxBox {
	width: 484px;
	height: 80px;
	float: left;
	color: #fff;
}

#headBlock .titleBox {
	width: 480px;
	height: 63px;
	float: left;
	color: #fff;
	padding: 17px 0px 0px 4px;
}

#headBlock .titleBox a {
	text-decoration: none;
}

#headBlock .temp {
	padding: 19px 0px 0px 100px;
	font-size: 18px;
	
	text-align: left;
	color: #fff;
	font-weight: bold;
}

#headBlock .tempColor {
	color: #fff;
}

 #headBlock #search_form {
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 }

#headBlock .searchBox {
	/*
	background-color: #fff;
	border: 1px solid #ccc;
	*/
	background-color: #0c162f;
	border: 1px solid #0c162f;
	width: 318px;
	height: 28px;
	margin: 20px 0px 30px 0px;
	float: left;
	text-align: center;
	padding: 0px 0px 0px 0px;
	color: #fff;
}

.searchBox .button {
	float: right;
	width: 28px;
	height: 28px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

.searchBox .dropdown {
	float: right;
	background-color: #b1cdff;
	width: 120px;
	height: 28px;
}


*+HTML .searchBox .dropdownMenu {
width: 100px;
margin: 4px 10px 0px 10px;
font-size: 10px;
}

.searchBox .dropdownMenu {
width: 110px;
height: 20px;
margin: 4px 5px 0px 5px;
}

.searchBox .searchField {
width: 165px;
height: 18px;
font-size: 14px;
float: right;
border: 0px;
padding: 5px 0px 5px 5px;
margin: 0px 0px 0px 0px;
color: #555;
}

#mainoutsideBlock {
width: 1024px;
background-color: #fff;
margin:0 auto;


}

#headtopBlock,#mainBlock,#bottomBlock,#navBlock,#bodyBlock,#headinsideBlock {
width:984px;
float:none;
margin:0 auto;
}
/*overflow: hidden;*/

#headinsideBlock {
height: 69px;
margin:0 auto;
}

/* NAVIGATION and SEARCH and WEATHER BOX */

#headMenu {
font-size:12px;
line-height:normal;
width:664px;
height: 34px;
float: left;
font-weight: bold;
}

#headMenu a:hover{


text-decoration:none;
background-color: #90b6f7;
color: #474842;

  }
 
 
#headMenu a:hover img{
 background-color: #2252a7;
  }
  

#headclassifiedMenu a:hover {


text-decoration:none;
background-color: #e47f09;
color: #fff;

  }
 

#headclassifiedMenu {

font-size:12px;
line-height:normal;
width:315px;
height: 34px;
float: right;
font-weight: bold;
}

#headMenu ul,  #headclassifiedMenu ul{
list-style:none;
margin:0;
padding:0;
}

#headMenu li {
float:left;
height:34px;
background-image: url('/graphics/ksl11/news-nav-divider.gif');
background-repeat: no-repeat;
background-position: 0px 6px; 
margin:0;
padding:0;
}

#headMenu .on, #headMenu .off {
float:left;
height:34px;
background-image: none;
background-repeat: no-repeat;
background-position: 0px 20px; 
margin:0;
padding:0;
}

#headclassifiedMenu li {
float:right;
height:34px;
background-image: url('/graphics/ksl11/marketplace-nav-divider.gif');
background-repeat: no-repeat;
background-position: 0px 6px; 
margin:0;
padding:0;
}

#headclassifiedMenu .on, #headclassifiedMenu .off {
float:right;
height:34px;
background-image: none;
background-repeat: no-repeat;
background-position: 0px 20px; 
margin:0;
padding:0;
}

#headMenu a, .Newson a, #headMenu .on a  {
padding:10px 5px 11px 5px;
}

#headMenu a {
float:left;
display:block;
height:13px;
color:#fff;

}

#headMenu img, #headclassifiedMenu img{
padding: 7px 0px 0px 0px;
}

#headMenu .on{
background-color: #b1cdff;
}

#headMenu .Homeon{
background: none;
}




#headclassifiedMenu  .on{
background-color: #f7941d;
}



#headMenu .on a{
font-weight:bold;
color: #0c162f;
}

#headclassifiedMenu  .on  a {
font-weight:bold;
color: #fff;
}


#headclassifiedMenu a {
color: #fff;
float:left;
display:block;
height:13px;
color:#fff;
padding: 10px 5px 11px 5px;
}

#navBlock {
background: #b1cdff; 
float:left;
height:26px;
overflow:hidden;
margin:0;
padding:0px 0px 0px 5px;
width: 979px;
}

#navBlockorange {
background: #f7941d; 
float:left;
height:26px;
overflow:hidden;
margin:0;
padding:0px 0px 0px 5px;
}

#navMenu, #navMenuorange {
float:left;
width:984px;
margin:0;
padding:0;
line-height: 4px;
}

#navMenu ul, #navMenuorange ul {
list-style:none;
margin:8px 0 0 0px;
padding:0;
}

#navMenu li, #navMenuorange li {
float:left;
margin:0;
padding:3px 5px;
}

#navMenu a {
display:block;
font-size:11px;
font-weight: 500;
/* color: #464646; */
color: #0c162f;
}

#navMenu .on a {
/* color: #2354ac; */
color: #0C162F;
text-decoration:underline;
}


#navMenuorange a {
display:block;
font-size:12px;
font-weight: 500;
color: #fff;
}

#navMenuorange .on a {
color: #fff;
text-decoration:underline;
}


#navInput, #navButton, #stockInput, #stockButton  {
padding:0px 0 0 0px;
float: left;
}

#navInput input { margin: 4px 0px 0px 0px;  height: 17px; width: 157px; font-size: 11px;}

#stockInput input { margin: 0px 0px 10px 10px;  height: 12px; width: 55px; font-size: 11px;}

#navButton input { padding: 4px 0px 0px 4px;  height: 20px; width: 19px; }

#stockButton input { padding: 0px 0px 0px 5px;  height: 20px; width: 20px; }

#navSearch {
	padding:0;
}

/* Weather dropdown */


	
/* 
	LEVEL ONE
*/
.wxchange { font-size: 10px; z-index: 1000; padding: 0px; margin: 0px;   }
ul.wxchange                         { position: relative; list-style: none;}
ul.wxchange li                      { font-weight: normal; float: left; zoom: 1; list-style: none; }

ul.wxchange li a                    { display: block; padding: 0px  0px; border-right: 1px solid #333;
	 								  color: #fff; }
ul.wxchange li:last-child a         { border-right: none; } 
ul.wxchange li.hover
            { color: black; position: relative; }
ul.wxchange li a:link:hover   { color: #fff; text-decoration: none;}
	
/* 
	LEVEL TWO
*/
ul.wxchange ul 						{ width: 75px; visibility: hidden; position: absolute; top: 100%; left: -40px; }
ul.wxchange ul li 					{ font-weight: normal; background: #ebebeb; color: #000; 
									  border-bottom: 1px solid #ccc; float: none; }
									  
                                    /* IE 6 & 7 Needs Inline Block */
ul.wxchange ul li a					{ border-right: none; width: 100%; display: inline-block; } 

ul.sub_menu {
		width: 75px; margin: 0px 0px 0px 40px; padding: 0px;
	-moz-box-shadow: 0 2px 5px #888;
	-webkit-box-shadow: 0 2px 5px#888;
	box-shadow: 0 2px 5px #888;
	behavior: url(PIE.htc);

}

ul.sub_menu li a { color: #555; padding: 5px 0px 5px 5px;}
ul.sub_menu li a:hover { color: #2354ac; text-decoration:underline; }



#leaderboard {
width: 984px;
height: 115px;
margin: 25px 0px 0px 0px;
float: left;
text-align: center;
border-bottom: #ccc 1px solid;
}

#tvRadioWindow {
    display: none;
    position: absolute;
	border-top: 8px solid #aec9fb;

	top: 29px;
	left: 50%;
	margin-left: -492px;
	width: 985px;
    z-index: 9999;
	color: #464646;
}

.tvRadioPopOver a {
	color: #fff; 
}

.tvRadioPopOver a:link { 
	color: #fff;
	text-decoration: none;
}

.tvRadioPopOver a:visited {
	color: #fff;
	text-decoration: none;
}

.tvRadioPopOver a:visited:hover {
	color: #fff;
	text-decoration: underline;
}

.tvRadioPopOver a:link:hover {
	color:#fff;
	text-decoration:underline; 
}


#popOverWindow {
    display: none;
    position: absolute;
	border-top: 8px solid #90b6f7;

    top: 143px;

	/* This causes a problem. When resizing the window */
	left: 50%; 
	margin-left: -492px;

	width: 985px;
    z-index: 9999;
	color: #464646;
}

#popOverBody a:link {
	text-decoration: none;
}

#popOverBody {
	height: 315px;
	width: 984px;
	padding-top: 20px;
	background-color: #ebebeb;
	border:0;
	font-family:Arial, Helvetica, sans-serif;
	position: absolute;
	z-index: 9999;

	-moz-box-shadow: 0 2px 5px #888;
	-webkit-box-shadow: 0 2px 5px#888;
	box-shadow: 0 2px 5px #888;
	behavior: url(PIE.htc);


}

.ListenButton {
    background: #5283d9;
    font-size: 12px;
    line-height: 21px;
}

#popOverBody #popOverLeft {
	float: left;
	/* width: 240px; */
	width: 220px;
	margin-left: 20px;
	height: 300px;
}

#popOverBody #popOverTitle {
	font-size: 30px;
	margin-bottom: 15px;
	line-height: 25px;
}

#popOverBody #popOverIndexTitle {
	font-size: 18px;
	margin-bottom: 7px;
}

#popOverBody #popOverIndexItems a:link, #popOverBody #popOverIndexItems a:visited {
	display: block;
	font-weight: bold;
	color: #2354ac;
	font-size: 12px;

	margin-bottom: 5px;
}

#popOverBody #popOverCenter {
	float: left;
	width: 480px;
	margin-right: 20px;

}

#popOverBody #popOverCenterUpper {
	width: 480px;
	float: left;
	margin-bottom: 15px;
}

#popOverBody #popOverTopStoryTitle {
	float: left;
	width: 480px;
	font-size: 18px;
	margin-bottom: 10px;
}

#popOverBody #popOverTopStoryImg {
	float: left;
}

#popOverBody #popOverTopStoryHeadline {
	width: 200px;
	float: right;
	font-size: 16px;
	margin-bottom: 7px;
	font-weight: bold;
}



#popOverBody #popOverTopStoryDesc {
	width: 200px;
	float: right;
	font-size: 12px;
}

#popOverBody #popOverTopStoryTraffic {
	width: 480px;
	float: right;
}

#popOverBody #popOverTopStoryWeather {
	margin-top: -5px;
	margin-left: 10px;
	float: left;
	width: 190px;
}

#popOverBody #popOverTopStoryWeatherTemp {
	font-size: 36px;
}

#popOverBody #popOverTopStoryWeatherCond {
	font-size: 18px;
	width: 190px;
}

#popOverBody .popOverTopStoryWeatherItem {
	font-size: 12px;
}

#popOverBody #popOverCenterLower {
	float: left;

	width: 485px;
	margin-right: 10px;
	margin-top: 0px;
	padding-top: 0px;
}

#popOverBody #popOverRecentTitle {
	margin-top: 0px;
	font-size: 16px;
	margin-bottom: 5px;
	font-weight: bold;
}

#popOverBody .popOverRecentCol {
	width: 240px;
}

#popOverBody .popOverRecentCol ul {
    margin: 0px 10px 0px 15px;
    padding: 0;
    list-style: round;
}

#popOverBody .popOverRecentCol li {
	font-size: 12px;
	padding-bottom: 5px;
}

#popOverBody #popOverRecentWeatherOutlook {
	font-size: 12px;
}

#popOverBody #popOverRight {
	float: left;
	width: 220px;
}

#popOverBody #popOverFeaturedTitle {
	font-size: 16px;
	margin-bottom: 10px;
	float: left;
	width: 220px;
	clear: both;
	font-weight: bold;
}

#popOverBody #popOverFeaturedItems {
	float: left;
}

#popOverBody #popOverFeaturedItem {
	float: left;
	margin-bottom: 20px;
	width: 220px;
}

#popOverBody #popOverFeaturedItemImg {
	float: left;
	width: 100px;
}

#popOverBody #popOverFeaturedItemTitle {
	float: right;
	width: 110px;
	margin-left: 10px;
	font-size: 12px;
}

#popOverBody #popOverFeaturedTV {
	float: left;
	width: 220px;
	clear: both;
}

#popOverBody #popOverFeaturedRadioItemTitle {
	font-size: 11px;
	margin-bottom: 5px;
}

#popOverBody #popOverFeaturedRadioItemTitle a, #popOverBody #popOverFeaturedRadioItemTitle a:visited {
    color: #2354ac;
    font-size: 11px;
    text-decoration: none;

}

#placeAdDropdown {
	display: none;
	position: absolute;
	/* border-top: 8px solid #90b6f7; */

	top: 168px;

	/* This causes a problem. When resizing the window */
	/* left: 50%; 
	margin-left: -492px; */

	right: 50%; 
	margin-right: -497px;

	/* width: 985px; */
	z-index: 9999;
	color: #464646;

	background-color: #f7941d;
	width: 82px; 
	/* height: 53px; */
	height: 80px;
}

/* webkit Chrome/Safari Hack */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#placeAdDropdown {
		margin-right: -496px;
	}
}

.placeAdHover {
	margin-top: -2px;
}
