/* 
	Title:			Merrimack.TV screen styles 
	Author:			Lokesh Dhakar 
	Last Modified:	07/27/2005

	Table of Contents:
		layout
		typography
		nav
		sidebar
		admin
		page specific
		clearing
		sIFR
*/


/* layout
----------------------------------------------- */
	
*{
	margin: 0;
	padding:0;
	}

body{
	background-color:#333;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: white;
	text-align: center;		/* centers content in IE5.5 and earlier */
	min-width: 729px;		/* prevents negative left-margins in narrow browser windows w/NN & Mozilla */
	}

#wrapper{
	width: 729px;
	margin: 0 auto;
	padding: 25px 0;
	text-align: left;
	}

#header{
	width: 729px;
	height: 186px;
	background: url(../../images/header/bg.gif) no-repeat;
	margin-bottom: 15px;
	}

#logo{
	float: left;
	padding: 12px 0 0 12px;
	}

#photo{
	float:right;
	padding: 7px 7px 0 0;
	}

#content{
	background-color: #1477B4;
	}

#leftcols{
	width: 515px;
	float: left;
	}

#main{
	width: 340px;	/* Opera 5 */
	\width: 350px;	/* IE5Win */
	w\idth: 340px;	/* Others */
	padding: 11px 5px 0 5px;
	float: right;
	}

#navcol{
	width: 149px;	/* Opera 5 */
	\width: 165px;	/* IE5Win */
	w\idth: 149px;	/* Others */
	padding: 8px;
	float: left;
	background: url(../../images/content/nav/bg.gif) top no-repeat;
	}

#sidebar{
	width: 200px;	/* Opera 5 */
	\width: 214px;	/* IE5Win */
	w\idth: 200px;	/* Others */
	padding: 7px 8px 0 6px;
	float: right;
	background: url(../../images/content/sidebar/bg.gif) top no-repeat;
	}

#footer{
	width: 729px;
	height: 146px;
	background: url(../../images/footer/bg.gif) no-repeat;
	color: #767676;
	}

#legal{
	width: 300px;
	float: left;
	text-align: right;
	padding-top: 101px;
	}

#credits{
	float: right;
	width: 326px;
	padding-top: 101px;
	}




/* typography
----------------------------------------------- */

h1 {
	font-family: Tahoma, Geneva, Arial, sans-serif;
	font-size: 1.8em; 
	font-weight: bold;
	margin-bottom: 8px;
	border-bottom: 2px solid #2C85BC;
	}
h2 { 
	font-size: 1.3em;
	font-weight: bold;
	padding-top: .5em;
	margin-bottom: .5em;
	}
h3 { 
	font-size: 1.1em;
	font-weight: bold;
	}

p {
	margin-bottom: 1.5em;
	line-height: 1.3em;
	}

a {
	color: #F3C444;
	font-weight: bold;
	text-decoration: none;
	}
a img{
	border: 0;
	}

#main a:hover{
	text-decoration: underline;
	}
#main ul {padding: 0px 0px 22px 16px; margin: -10px 0 0 0px;}
#main ul li{ list-style-image:url("../../images/content/bullet.gif"); margin: 0px 0px -1px 0px; padding: 0px 0px 0px 0px; }

#footer a{
	font-weight: normal;
	color: #767676;
	}

/* nav
----------------------------------------------- */
#nav li {
	list-style: none;
	background-color: #0A5A8C;
	border-bottom: 1px solid #236B98;
	}

#nav a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 5px 5px 5px 13px;
	}
	
#nav li.first{
	background: url(../../images/content/nav/firstbg.gif) no-repeat;
	}
#nav li.last{
	background: url(../../images/content/nav/lastbg.gif) no-repeat;
	/* IE inexplicably adds 10px+ padding to the bottom of the nav unless their is a bottom border */
	border-bottom: 1px solid #1477B4;
	}

/* nav hover states */

#nav li:hover {
	background-color: #0E517B;
	}
#nav a:hover { /* a backup for IE's lack of li:hover support */
	background-color: #0E517B;
	}
html>body #nav a:hover {
	background-color: #0E517B;
	}
	
#nav li.first:hover {
	background: url(../../images/content/nav/firstbg_on.gif) no-repeat;
	}
#nav .first a:hover { /* a backup for IE's lack of li:hover support */
	background: url(../../images/content/nav/firstbg_on.gif) no-repeat;
	}
html>body #nav .first a:hover {
	background: url(../../images/content/nav/firstbg_on.gif) no-repeat;
	}
	
#nav li.last:hover{
	background: url(../../images/content/nav/lastbg_on.gif) no-repeat;
	}
#nav .last a:hover { /* a backup for IE's lack of li:hover support */
	background: url(../../images/content/nav/lastbg_on.gif) no-repeat;
	}
html>body #nav .last a:hover {
	background: url(../../images/content/nav/lastbg_on.gif) no-repeat;
	}


/* sub nav */

#subnav {
	border-top: 1px solid #236B98;

}

* html #subnav {
	b\order-bottom: 1px solid #236B98;	/* adds bottom border for IE5 Mac and IE6 */
}

#subnav li {
	font-size: .9em;
	border: none;
	background: url(../../images/content/nav/subnavbg.gif) no-repeat;
	}

#subnav a {
	color: #F3C444;
	display: block;
	text-decoration: none;
	padding: 2px 0 2px 29px;
	}

#subnav li.first{ 
	background: url(../../images/content/nav/subnavbg.gif);
	background-color: #0A5A8C;
	}
#subnav li.last{
	background: url(../../images/content/nav/subnavbg.gif) no-repeat;
	background-color: #0A5A8C;
	border-bottom: none;
}

/* subnav hover states */

#subnav li:hover {
	background: url(../../images/content/nav/subnavbg_on.gif);
}
#subnav a:hover { /* a backup for IE's lack of li:hover support */
	background: url(../../images/content/nav/subnavbg_on.gif);
	}
html>body #subnav a:hover {
	background: url(../../images/content/nav/subnavbg_on.gif);
	}
	
#subnav li.first:hover {
	background: url(../../images/content/nav/subnavbg_on.gif);
	}
#subnav .first a:hover { /* a backup for IE's lack of li:hover support */
	background: url(../../images/content/nav/subnavbg_on.gif);
	}
html>body #subnav .first a:hover {
	background: url(../../images/content/nav/subnavbg_on.gif);
	}
	
#subnav li.last:hover{
	background: url(../../images/content/nav/subnavbg_on.gif);
	}
#subnav .last a:hover { /* a backup for IE's lack of li:hover support */
	background: url(../../images/content/nav/subnavbg_on.gif);
	}
html>body #subnav .last a:hover {
	background: url(../../images/content/nav/subnavbg_on.gif);
	}

	



/* sidebar
----------------------------------------------- */

#sidebar ul{
	font-size: .9em;
	font-weight: bold;
	margin-bottom: 20px;
}

#sidebar li{
	border-bottom: 1px solid #236B98;
	list-style: none;
	background: url(../../images/content/sidebar/midbg.gif) no-repeat;
	}
	
#sidebar a {
		display: block;
		color: #fff;
		text-decoration: none;
		padding: 5px 5px 5px 25px;
	}

#sidebar li.first{
	color: #fff;
	font-weight: bold;
	padding: 5px 5px 5px 13px;
	background: url(../../images/content/sidebar/firstbg.gif);
	}
#sidebar li.last{
	background: url(../../images/content/sidebar/lastbg.gif);
	/* IE inexplicably adds 10px+ padding to the bottom of the nav unless their is a bottom border */
	border-bottom: 1px solid #1477B4;
	}

/* hover state */

#sidebar li:hover {
	background: url(../../images/content/sidebar/midbg_on.gif);
	}
#sidebar a:hover { /* a backup for IE's lack of li:hover support */
	background: url(../../images/content/sidebar/midbg_on.gif);
	}
html>body #sidebar a:hover {
	background: url(../../images/content/sidebar/midbg_on.gif);
	}

#sidebar li.first:hover{
	background: url(../../images/content/sidebar/firstbg.gif);
	}
#sidebar .first a:hover { /* a backup for IE's lack of li:hover support */
	background: url(../../images/content/sidebar/firstbg.gif);
	}
html>body #sidebar .first a:hover {
	background: url(../../images/content/sidebar/firstbg.gif);
	}
	
#sidebar li.last:hover{
	background: url(../../images/content/sidebar/lastbg_on.gif);
	}
#sidebar .last a:hover { /* a backup for IE's lack of li:hover support */
	background: url(../../images/content/sidebar/lastbg_on.gif);
	}
html>body #sidebar .last a:hover {
	background: url(../../images/content/sidebar/lastbg_on.gif);
	}

/* What's On Now sidebox */

#now li a{
	font-weight: normal;
	color:#F3C444;
	}
#now li a strong{
	color: #fff;
	}

/* Merrimack TV Promo Clip sidebox */

#promo li a{
	font-weight: normal;
	color:#F3C444;
	}
#promo li a strong{
	color: #fff;
	}

#promo li.last a{
	background: url(../../images/content/sidebar/lastbg_promo.gif);
	/* IE inexplicably adds 10px+ padding to the bottom of the nav unless their is a bottom border */
	padding-bottom: 26px;
}

#promo li.last{	/* IE5.0 images jump on hover unless both the link and list bg images are set */
	background: url(../../images/content/sidebar/lastbg_promo.gif);
	}

#promo li.last:hover{
	background: url(../../images/content/sidebar/lastbg_promo_on.gif);
	}
#promo .last a:hover { /* a backup for IE's lack of li:hover support */
	background: url(../../images/content/sidebar/lastbg_promo_on.gif);
	}
html>body #promo .last a:hover {
	background: url(../../images/content/sidebar/lastbg_promo_on.gif);
	}

#promo li .clip{
	font-weight: normal;
	color:#F3C444;
	}


/* entries (news, events, press)
----------------------------------------------- */

.headline,
.blurb{
	border-bottom: 1px solid #2C85BC;
	margin-bottom: 5px;
	}

.headline h2,
.blurb h2{
	margin-bottom: 2px;
	}

.date{
	font-weight: bold;
	padding-bottom: 6px;
	}

.back{
	padding-right: 10px;
	text-align: right;
	}


/* admin
----------------------------------------------- */

#admin{
	width: 90%;
	margin: 0 auto;
	padding: 25px 25px;
	text-align: left;
	background-color: #1477B4;
	font-size: 12px;
	}
#admin h2{
	font-family: Tahoma, Geneva, Arial, sans-serif;
	font-size: 1.4em; 
	font-weight: bold;
	margin-bottom: 8px;
	}

#admin .listing{
	}
#admin .listing thead tr td{
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	background-color: #39D;
	border-top: 1px solid #76B0D3;
	border-bottom: 1px solid #28C;
	}
#admin .listing td{
	font-size: 10px;
	color: #666;
	background-color: #fff;
	border-top: 1px solid #eee;
	padding: 2px 6px;
	}	

#admin input,
#admin select{
	font-size: .9em;
	}

#admin .notebox{
	border: 2px solid #2C85BC;
	background-color: #2C85BC;
	padding: 10px;
	margin: 10px 0;
	}	



/* page specific 
----------------------------------------------- */

/* homepage */
#main #intro{
	padding-bottom: 1.3em;
	margin-bottom: 0;
	border-bottom: 1px solid #2C85BC;
	}

/* schedule landing page */	
#main #channel-buttons{
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom: 15px;
	}
#main #channel-buttons li {
	margin-right: 10px;
	list-style: none;
	float: left;
	text-indent: -9000px;
	}
#channel-buttons a {
	display: block;
	height: 110px;
	text-decoration: none;
	}
#channel-buttons a:hover {
	text-decoration: none;
	}
#channel-buttons #channel-22 a{ width: 98px; background: url(../../images/content/22.gif) no-repeat;}
#channel-buttons #channel-21 a{ width: 98px; background: url(../../images/content/21.gif) no-repeat;}
#channel-buttons #channel-20 a{ width: 98px; background: url(../../images/content/20.gif) no-repeat;}

/* hover states */

#channel-buttons #channel-22 li:hover { background: url(../../images/content/22_on.gif) no-repeat;	}
#channel-buttons #channel-22 a:hover { background: url(../../images/content/22_on.gif) no-repeat; }
html>body #channel-buttons #channel-22 a:hover { background: url(../../images/content/22_on.gif) no-repeat;	}

#channel-buttons #channel-21li:hover { background: url(../../images/content/21_on.gif) no-repeat;	}
#channel-buttons #channel-21 a:hover { background: url(../../images/content/21_on.gif) no-repeat; }
html>body #channel-buttons #channel-21 a:hover { background: url(../../images/content/21_on.gif) no-repeat;	}

#channel-buttons #channel-20 li:hover { background: url(../../images/content/20_on.gif) no-repeat;	}
#channel-buttons #channel-20 a:hover { background: url(../../images/content/20_on.gif) no-repeat; }
html>body #channel-buttons #channel-20 a:hover { background: url(../../images/content/20_on.gif) no-repeat;	}



/* clearing
----------------------------------------------- */

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}



/* sIFR
----------------------------------------------- */

/* These are standard sIFR styles... do not modify */
.sIFR-flash {
	visibility: visible !important;
	margin: 0;
	}

.sIFR-replaced {
	visibility: visible !important;
	}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
	}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
	visibility: hidden;
	letter-spacing: -9px;
	font-size: 25px;
	}