/* 
family41_channels_screen.css
Copyright 2008, Focus on the Family
Created: 5/16/08
Modified: 1/15/10
Version 1.1
Modification history:
1/15/10: Changes to support Super Bowl
*/

/* overrides of other styles */
ul#primaryNav { background:url(/images/backgrounds/accordion_tile.png) repeat-y; }
#editorialWell { float:left; clear:none; width:506px; overflow:hidden; margin:4px 0 15px 15px; padding:15px; background:url(/images/backgrounds/article_tile.png) repeat-y; }
#channelSideBar .sbBox { width:200px; overflow:hidden; background:url(/images/backgrounds/article_tile.png) repeat-y; padding-bottom:5px; }
#channelSideBar .sbBox .content { background:none; overflow:hidden; padding-top:5px;  }
ul.backNext li { background:none; line-height:13px; margin:0; padding:0 0 0 3px; }
#mediaSelector ul.backNext li a { color:#0d3c44; }
ul.backNext { margin:0 0 8px 0; float:right; }

#mediaSelector .sbBox { height:282px; }
#mediaSelector .sbBox .content { height:201px; }

/* main layout styles*/
#channelSideBar { width:198px; float:left; overflow:hidden; margin:4px 0 0 15px; }

#mediaSelector { height:282px; margin:0 0 5px 0; overflow:hidden; }

#familyStore,
#yourStories { margin:0 0 5px 0; overflow:hidden; }

.storeboxLeft { width:506px; overflow:hidden; }

.mediaboxLeft { float:left; width:506px; overflow:hidden; height:292px; }

.storiesboxLeft { float:left; width:506px; overflow:hidden; }

/* edwell styles */
.channelTitle { width:749px; height:78px; overflow:hidden; background:url(/images/backgrounds/bg_life_challenges.png) 15px 15px no-repeat; padding:15px 0 0 15px; }

.marriage { background:url(/images/backgrounds/bg_marriage.png) 15px 15px no-repeat; }
.parenting { background:url(/images/backgrounds/bg_parenting.png) 15px 15px no-repeat; }

.channelTitle h1 { margin:0; height:63px; width:743px; font-size:2.9em; color:#fff; padding:15px 0 0 15px; }

.channelTitle h2.tagline { font-size:13px; line-height:15px; color:#fff; }

#playerBox { display:none; }
#featureBox { width:506px; padding:15px 15px 0 15px; margin:-15px 0 0 -15px; min-height:180px; overflow:hidden; background:url(/images/backgrounds/featuredarticle_bg.png) no-repeat; }

#featureBox h2 a,
#featureBox a.moreLink { color:#0d3c44; font-weight:bold; text-decoration:none; }
#featureBox h3 a { color:#fff; text-decoration:none; }
#featureBox h2 a:hover,
#featureBox a:hover.moreLink { color:#A27E44; }
#featureBox h3 { margin:0; font-size:1em; line-height:1em; }
#featureBox h2 { margin:5px 0; font-size:2.3em; line-height:1; }

#featureBox a.moreLink { float:right; text-decoration:none; font-weight:bold; }
#featureBox a.moreLink:hover { color:#A27E44; }

/* media box styles */
#tabs { width:506px; clear:both; overflow:hidden; padding-top:15px; }
#mediaSelector #tabs div { float:right; width:300px; overflow:hidden; text-align:center; }

h2#mSelector,
#yStories h2,
h2#fStore { color:#4b4b4b; font-size:1.5em; font-weight:bold; margin:0 0 3px 0; border-bottom:1px solid #4b4b4b; }

h2#mSelector { float:left; width:180px; border:none; margin:0; }

#tabs ul { float:right; list-style:none; margin:0 auto; padding:0; overflow:hidden; }
#tabs li { border:1px solid #4b4b4b; border-bottom:none; display:inline; margin:0 0 -1px 5px; }
#tabs a { display:block; padding:5px 10px; color:#0d3c44; background:#fff; text-decoration:none; }

#tabs a:hover { color:#A27E44; }

#tabs a.tab1selected,
#tabs a:hover.tab1selected { background:#0d3c44; color:#fff; }

#tabs a.tab2selected,
#tabs a:hover.tab2selected { background:#0d3c44; color:#fff; }

#tabs a.tab3selected,
#tabs a:hover.tab3selected { background:#0d3c44; color:#fff; }

#filterBox { overflow:hidden; height:210px; color:#4b4b4b; width:506px; clear:both; border-top:1px solid #4b4b4b; }

#sort { overflow:hidden; height:50px; margin-top:-5px; }
#sort1 { height:25px; overflow:hidden; }
#sort p,
#sort1 p { margin:6px 0 0 0; }
#sort ul,
#sort1 ul { text-align:right; list-style:none; margin:6px 0; padding:0; }
#sort li,
#sort1 li { display:inline; margin:0 1px; }
#sort li a,
#sort1 li a { color:#0d3c44; text-decoration:none;  font-weight:normal; }/* Modified by Sushma to Apply font-weight bold only to selected anchor */
#sort li a:hover,
#sort1 li a:hover { color:#A27E44; }
#sort li a.selected,
#sort1 li a.selected { font-weight:bold; }
#sort li a.selected:hover,
#sort1 li a.selected:hover { color:#A27E44; }

#filterBox .content img { width:88px; height:82px; margin:0 0 1px 13px; }
#filterBox .content { border-right:1px solid #4b4b4b; float:left; width:118px; height:188px; overflow:hidden; margin:1px 10px 0 0; }
#filterBox .content p { margin:2px 0; line-height:14px; overflow:hidden; }
#filterBox .content .info { overflow:hidden; padding:0 0 2px 0; height:63px; }
#filterBox .last { margin-right:0; border:0 }

#filterBox h4 {  margin:0; }
#filterBox h4 a { background:url(/images/backgrounds/sprites.gif) no-repeat; padding:0 0 0 20px; font-weight:bold; }
#filterBox h4 a.Article { background-position: -328px -165px; }
#filterBox h4 a.Video { background:url(/images/backgrounds/sprites.gif) -283px -212px no-repeat; }
#filterBox h4 a.Audio { margin:0 0 3px 0; background:url(/images/backgrounds/sprites.gif) -303px -189px no-repeat; }

#filterBox .content h4 a { font-size:.7em; color:#0d3c44; text-decoration:none; }

#filterBox .content .info h4 a .desc,
#filterBox .content .info h4 a .sfhover { display:none; position:absolute; margin:0; }
#filterBox .content .info h4 a:hover .desc,
#filterBox .content .info h4 a:hover .sfhover { position:absolute; padding:10px; background:url(/images/backgrounds/info_bg.gif) no-repeat; width:200px; display:block; z-index:600; margin:-11px 0 0 -10px; font-weight:normal; font-size:10px; color:#000; text-decoration:none; height:110px; overflow:hidden; line-height:11px; }

#filterBox p { color:#4b4b4b; font-size:.9em; }
#editorialWell #filterBox p a { font-size:1em; color:#0d3c44; font-weight:bold; text-decoration:none; clear:both;  }
#editorialWell #filterBox p a:hover { color:#A27E44; }

#mediaPager,
#storePager,
#storiesPager { color:#4b4b4b; height:31px; padding:5px 0 0 0; overflow:hidden; border-top:1px solid #4b4b4b; }

#mediaPager { margin-top:5px; }

#mediaPager li.first,
#storePager li.first,
#storiesPager li.first { text-transform:uppercase; color:#4b4b4b; font-weight:bold; }
#mediaPager ul,
#storePager ul,
#storiesPager ul { list-style:none; float:right; padding:0; margin:0; }
#mediaPager li,
#storePager li,
#storiesPager li { display:inline; margin:0 3px; }

#mediaPager ul li a,
#storePager ul li a,
#storiesPager ul li a { color:#0d3c44; font-size:15px; font-weight:bold; text-decoration:none;  }
#mediaPager ul li a:hover,
#storePager ul li a:hover,
#storiesPager ul li a:hover { color:#A27E44; }
#mediaPager ul li a.selected,
#storePager ul li a.selected,
#storiesPager ul li a.selected { color:#A27E44; }

#yStories { width:506px; overflow:hidden; padding-top:15px; margin:0 0 4px 0; border-bottom:1px solid #4b4b4b; }
#yStories h2 { width:200px; float:left; border:none; }
#yStories a { text-align:right; float:right; color:#0d3c44; font-weight:bold; font-size:.9em; line-height:1; width:250px; text-decoration:none; margin:8px 5px 0 0; }
#yStories a:hover { color:#A27E44; }

/* sbBox styles */
#channelSideBar a { color:#0d3c44; font-weight:bold; text-decoration:none; }
#channelSideBar a:hover { color:#A27E44; }
#channelSideBar .sbBox h2 { text-align:center; display:block; width:180px; padding:10px; height:17px; overflow:hidden; font-size:1.2em; font-weight:bold; color:#fff; margin:0; background:url(/images/backgrounds/subtitle_bg.gif) no-repeat; }
#channelSideBar .sbBox h3 a { font-size:1.2em; }

#channelSideBar li a { font-weight:bold; }

#channelSideBar .sbBox p { line-height:13px; }
#channelSideBar .sbBox a.moreLink { margin:0 10px 0 0;  }

/* family store styles */
.leftBorder { width:494px; padding:0 4px; overflow:hidden; border-left:1px solid #4b4b4b; margin:5px 0 5px 4px; }
#editorialWell #familyStore .resource,
#editorialWell #yourStories .resource { overflow:hidden; float:left; min-height:121px; width:235px; margin:0 0 0 5px; padding:0 5px 0 0; border-right:1px solid #4b4b4b; }
#editorialWell #familyStore .resource h4,
#editorialWell #yourStories .resource h4 { margin:0; float:left; width:140px; }
#editorialWell #familyStore .resource h4 a,
#editorialWell #yourStories .resource h4 a { color:#0d3c44; font-size:.8em; font-weight:bold; text-decoration:none; float:left; }
#editorialWell #familyStore .resource h4 a:hover,
#editorialWell #yourStories .resource h4 a:hover { color:#A27E44; }
#editorialWell #familyStore .resource img,
#editorialWell #yourStories .resource img { float:left; margin:0 5px 0 5px; }
#editorialWell #familyStore .resource .itemDesc,
#editorialWell #yourStories .resource .itemDesc { float:left; line-height:1.1; font-size:1em; margin:5px 0 0 0; width:140px; }
#editorialWell #familyStore .resource a.moreLink,
#editorialWell #yourStories .resource a.moreLink { color:#0d3c44; text-decoration:none; float:right; }
#editorialWell #familyStore .resource a:hover.moreLink,
#editorialWell #yourStories .resource a:hover.moreLink { color:#A27E44; }
#editorialWell #familyStore .resource div.clear,
#editorialWell #yourStories .resource div.clear { display:none; clear:none; overflow:hidden; width:0em; height:0em; }

/* your stories styles */
#letterImage { display:none; }
#letterImage a { text-indent:-9999px; display:block; font-size:1px; width:136px; height:150px; background:url(/images/backgrounds/letterimage_background.gif) no-repeat; }
#letterImage b { text-indent:-9999px; display:block; font-size:1px; width:136px; height:150px; background:url(/images/backgrounds/keyboard.jpg) no-repeat; }
#mapImage a { text-indent:-9999px; display:block; font-size:1px; width:136px; height:150px; background:url(/images/backgrounds/mapofusa.gif) no-repeat; }
#submitLink { position:absolute; z-index:900; top:1137px; left:513px; }
#submitLink a { text-transform:uppercase; color:#fff; font-size:11px; line-height:13px; }
#readerSubmit { float:left; width:240px; margin:0; padding:0; overflow:hidden; }
#readerSubmit p { margin:0; }
#storyList { float:left; min-height:149px; width:180px; overflow:hidden; margin:0 0 3px 10px; padding:0 0 0 10px; border-left:1px solid #4b4b4b; }
#storyList ul { list-style:none; margin:0; padding:0; }
#storyList li { margin:0 0 5px 0; line-height:15px; }

#storyList li a { color:#0d3c44; font-weight:bold; text-decoration:none; }
#storyList li a:hover { color:#A27E44; }