/*
    TEC Digital Media Hub
    
    structure and flow
    
    take 1
    
    
    
    --
    GENERAL NOTES:
    -------------------------------------------------------------------------
    hub logo area 500x126
    body bg default: #171511
    notify area @ 432x77
    
*/



/*
 *
 * RESETS FOR EASIER CROSS BROWSER COMPATIBILITY
 *
*/

* {
    font-family: "Lucida Grande", "LucidaGrande", "Lucida Sans Unicode", Tahoma, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

:focus {
    outline: none;
}

img {
    border: 0;
}

p {
    font-size: 11px;
}



/*
 *
 * STRUCTURAL / MAIN ITEMS
 *
*/

body {
    margin-top: 31px;
    background: #d7d7d7 url(../images/body_bg2.gif) 0 31px repeat-x;
    text-align: center;
}

div#branding {
    position: absolute;
    width: 100%;
    height: 320px; /*500px when expanded*/
    left: 0;
    top: -289px;
    color: #fff;
    background-color: #003565;
    text-align: left;
    z-index: 998;
    overflow: hidden;
}

    div#brandingInner {
        width: 900px;
        margin:20px auto;
        padding:20px;
        position:relative;
        /* wes 7/12/09 */
        height: 216px;
        overflow: hidden;
    }
    
    div#brandingInner label {
        margin-top:11px;
        font-size: 11px;
        font-weight:normal;
        display:block;
        clear: left;
    }
    
    div#brandingInner input {
        border:none;
        font-size:14px;
        padding:2px;
        float: left;
        margin-bottom: 10px;
        width:200px;
    }
    
    div#brandingInner input.btn {
        clear: left;
        margin-top:10px;
        border:none;
        float:left;
        font-size:11px;
        padding:3px;
        width:auto;
    }
    
    div#brandingInner #fbLogin {
        clear:both;
        float:left;
        font-size:11px;
        font-weight:normal;
        margin-top:14px;
    }
    
    div#brandingInner #fbLogin span {
        margin-bottom:4px;
        display:block;
    }

    
    div#brandingInner div#brandingLoginForm {
        float: left;
        margin-right:35px;
    }
    
    div#brandingInner div#brandingSignUpForm {
        /*width: 48%;*/
        /*overflow: auto;*/
        border-left:1px solid #001f3c;
        float:left;
        padding-left:35px;
    }
    
    div#brandingInner div#brandingSignUpForm div#signUpLeftPanel,
    div#brandingInner div#brandingSignUpForm div#signUpRightPanel {
        width: 185px;
        float: left;
    }
        
        div#brandingInner div#brandingSignUpForm div#signUpRightPanel {
            margin-left:40px;
        }
        
        div#brandingInner div#brandingSignUpForm div#signUpRightPanel input.btn {
            clear:none;
        }
        
        div#brandingInner div#brandingSignUpForm div#signUpRightPanel input.clearForm {
            margin-left:10px;
            background:transparent;
            color:#ff0000;
            font-size:11px;
        }
    
    div#brandingInner div#note {
        float:right;
        font-size:10px;
        width:200px;
        margin-top:42px
    }
    
    div#brandingInner a.closePanel,
    div#brandingInner a.closePanel:visited {
        background:#002A51 url(../images/closeTop_bg.gif) no-repeat scroll 86% 50%;
        bottom:4px;
        font-size:10px;
        padding:6px 21px 6px 6px;
        position:absolute;
        right:49px;
        color:#fff;
        text-decoration:none;
    }
    
    div#brandingInner a.closePanel:hover {
        color:#fff;   
    }
    
/* search styles right here yo */

    div#brandingInner ul.searchResults {
        float:left;
        width:300px;
        list-style:none;
        font-size:11px;
    }
        
        div#brandingInner ul.searchResults li {
            margin:0 1px 1px 0;
            background:#002A51;
            border-bottom: 1px solid #001931;
            border-right: 1px solid #001931;
            color:#00C0FF;
            padding:8px;
        }    
            div#brandingInner ul.searchResults li h3 {
                font-size: 13px;
                /*margin-bottom:8px;*/
                color:#fff;
                border:none;
                display:block;
            }
            
            div#brandingInner ul.searchResults li a,
            div#brandingInner ul.searchResults li a:visited {
                color:#00C0FF;
                text-decoration:none;
            }
            
            div#brandingInner ul.searchResults li a:hover {
                text-decoration:underline;
            }
    
    div#brandingInner ul.searchResults b {
        color:#f6fd8b;
    }

div#branding div#brandingHandle {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 31px;
    background: #003565 url(../images/branding_bg.gif) 0 0 repeat-x;
}

div#branding div#brandingHandle img#brandingHUB {
    position: absolute;
    margin: 9px 0 0 10px;
}

div#branding div#brandingHandle img#brandingMediaTemple {
    position: absolute;
    right: 17px; /* 17(bt right margin) + 36(bt width) = 53 ... + 22(padding from bt to mt) = 79px */
    top: 8px;
}

div#branding div#brandingHandle img#brandingBitGravity {
    position: absolute;
    right: 73px;
    top: 9px;
}



/* links for sign up and log in */
div#stage div#userLinks {
    font-size:10px;
    right:150px;
    position:absolute;
    text-align:center;
    top:8px;
    z-index:995;
}

div#stage div#userLinks a:link,
div#stage div#userLinks a:active,
div#stage div#userLinks a:visited {
    color: #80a9ce;
    text-decoration: none;
}



/* old way - works but search went off to the right on page resize */
/*div#branding div#search {*/
/*    position: absolute;*/
/*    right: 0;*/
/*    bottom: -26px;*/
/*    width: 158px;*/
/*    height: 28px;*/
/*    background: transparent url(../images/search_tab.gif) 0 0 no-repeat;*/
/*    text-align: center;*/
/*    z-index: 999;*/
/*}*/
/*div#branding div#search form input[name="q"] {*/
/*    width: 95px; /* 115px - padding * /*/
/*    height: 18px;*/
/*    padding: 0 17px 0 3px;*/
/*    border: 0 none;*/
/*    color: #fff;*/
/*    background: #002a51 url(../images/search_icon.gif) 99% 2px no-repeat;*/
/*    font-size: 75%*/
/*}*/

/* new way: search is part of the #stage element, not the branding banner... kinda weird but it works */
div#stage div#search {
    position: absolute;
    right: 10px;
    top: -2px;
    width: 300px;
    height: 28px;
    background: transparent url(../images/search_tab.gif) top right no-repeat;
    text-align: center;
    z-index: 999;
}
div#stage div#search form input[name="q"] {
    background:#002A51 url(../images/search_icon.gif) no-repeat scroll 97% 2px;
    border:0 none;
    color:#FFFFFF;
    float:right;
    font-size:70%;
    height:16px;
    margin-right:22px;
    margin-top:4px;
    padding:2px 17px 0 3px;
    width:95px;
}





div#stage {
    position: relative;
    width: 1008px;
    margin: 0 auto;
    /* debug padding-bottom: 25px;*/
    text-align: left;
    overflow:hidden;
}

div#header {
    width: 100%;
    height: 153px;
}

div#header div#logo {
    float: left;
    width: 307px;
    height: 113px;
    margin-top: 20px;
}

div#header div#notify {
    float: left;
    width: 390px;
    height: 58px;
    margin: 47px 0 0 225px; /* top = 16(aesthetics) + 31(height of branding bar when collapsed) = 47px */
    padding: 8px 5px 5px 36px;
    background: url(../images/hub_twitIcon.png) 9px 6px no-repeat;
    color: #fff;
    line-height: 15px;
    /*debug*//*border-top: 1px #1f344c inset;*/
    /*debug*//*border-bottom: 1px #1f344c outset;*/
}

/* debug - this might not be IE safe ? */
div#header div#notify * {
    font-size: 12px;
}

div#header div#notify a:link,
div#header div#notify a:active,
div#header div#notify a:visited {
    color: #ddd;
}


div#present {
    display: block;
    height: 371px; /* 388px - padding-top/bottom @ 10px == 368px */
    
    /* if we dont wanna do it this way, we have to change the body bg image */
    /* furthermore, if vert-scrollbars show up, it will throw the layout OFF so watch it */
    overflow: hidden;
}

/* no padding on the right side of this guy */
div#present div#videoPlayer {
    float: left;
    width: 650px;
    height: 368px;
    overflow: hidden;
    text-align: right;
    color: #fff; /* text won't really be here, but just in case */
    background: transparent url(../images/player640x360_bg.gif) 0 0 no-repeat;;
}

/*******DEBUG*******/
div#present div#videoPlayer img {
    /* sample bgravity player */
    margin-top: 2px;
    margin-right: 1px;
}
/****END_DEBUG*****/

div#present div#videoPlayer a#flowplayer {
    display: block;
    height: 360px;
    margin-bottom: 0;
    margin-left: 9px;
    margin-right: 0;
    margin-top: 1px;
    width: 640px;
}

div#present div#videoInformation {
    position: relative;
    float: left;
    width: 318px; /* 274px - padding l - padding r */
    height: 312px;
    padding: 9px 27px 0 10px;
    overflow: hidden;
    color: #e6f0f7;
    background: transparent url(../images/teclive640x360_bg.gif) 0 0 no-repeat;
    font-family: "Lucida Grande", "LucidaGrande", "Lucida Sans Unicode",
        Georgia, "Palatino Linotype", "Garamond", Tahoma, Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
}

div#present div#videoInformation h1,
div#present div#videoInformation h2 {
    margin-bottom: 2px;
    color: #ffeea0;
    font-family: georgia, serif;
    /*font-family: "Lucida Grande", "LucidaGrande", "Lucida Sans Unicode",
        Georgia, "Palatino Linotype", "Garamond", Tahoma, Arial, sans-serif;  **titles should just be georgia, serif */
    font-size: 14px;
    font-weight: normal;
}

div#present div#videoInformation h2 {
        margin-bottom:4px;
        font-size:12px;
}

/* this holds the TECLive logo + the "live" and "on-demand" tab thingies */
div#present div#videoInformation div#TECLive {
    width: 100%;
    height: 19px;
    margin-bottom: 6px;
}

div#present div#videoInformation div#TECLive img,
div#present div#videoInformation div#TECLive a {
    display: block;
    float: left;
}
div#present div#videoInformation div#TECLive a#videoCPLShowLive {
    width: 24px;
    height: 17px;
    margin: 5px 0 0 9px;
    background: transparent url(../images/liveBtns_live.gif) 0 -21px no-repeat;
}

div#present div#videoInformation div#TECLive a#videoCPLShowVOD {
    width: 63px;
    height: 17px;
    margin: 5px 0 0 9px;
    background: transparent url(../images/liveBtns_onDemand.gif) 0 -21px no-repeat;
}

    div#present div#videoInformation div#TECLive a#videoCPLShowLive.active,
    div#present div#videoInformation div#TECLive a#videoCPLShowVOD.active {
        background-position: 0 0;
    }


/* this is content related to the video playing */
div#present div#videoInformation div#videoCPL {
    /*width: 285px;*/ /* 252px - 11px(right margin) */
    width: 283px;
    height: 237px;
    margin: 0 0 0 -11px;
    padding: 0 0 0 11px;
    z-index: 557;
    overflow: hidden;
}

div#present div#videoInformation div#videoCPLSpacer {
    display: block;
    height: 8px;
}

div#present div#videoInformation div#videoCPL p {
    font-size: 11px;
    clear: right;
}

    div#present div#videoInformation div#videoCPL a:link,
    div#present div#videoInformation div#videoCPL a:active,
    div#present div#videoInformation div#videoCPL a:visited {
        color:#00c0ff;
        text-decoration:none;
    }
    
    div#present div#videoInformation div#videoCPL a:hover,
    div#present div#videoInformation div#videoCPL a:active:hover,
    div#present div#videoInformation div#videoCPL a:visited:hover {
        text-decoration:underline;
    }

div#present div#videoInformation div#videoCPL div#moreLiveWrap {
    position:absolute;
    bottom: 34px;
}

div#present div#videoInformation div#videoCPL ul#liveInfo,
div#present div#videoInformation div#videoCPL ul#moreLive {
    margin-top:6px;
    padding:0;
    /*list-style-image:url(../images/tecLive_infoArrow.gif);*/
    list-style-type:none;
    list-style-position:outside;
}
    
    div#present div#videoInformation div#videoCPL ul#moreLive {
        margin-top:0;
    }
    
div#present div#videoInformation div#videoCPL ul#liveInfo li,
div#present div#videoInformation div#videoCPL ul#moreLive li {
    margin:0;
    padding:0;
    font-size:10px;
    font-style:italic;
    color:#00c0ff;
}
    
div#present div#videoInformation div#videoCPL ul li a,
div#present div#videoInformation div#videoCPL ul li a:active,
div#present div#videoInformation div#videoCPL ul li a:visited {
    color: #00c0ff;
    text-decoration: none;
}

div#present div#videoInformation div#videoCPL a.videoThumbnail:link,
div#present div#videoInformation div#videoCPL a.videoThumbnail:active,
div#present div#videoInformation div#videoCPL a.videoThumbnail:visited {
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    text-decoration: none;
    color: #fefefe;
    margin: 0 7px 7px 0;
    position:relative;
}

        div#present div#videoInformation div#videoCPL a.videoThumbnail div.thumbMask {
        position:absolute;
        top:0;
        left:0;
        height:50px;
        width:50px;
        overflow:hidden;
        background:url(../images/thumbnailMask_sprite.png) 0 0 no-repeat;
    }
        
        div#present div#videoInformation div#videoCPL a.videoThumbnail div.thumbMask:hover {
            background-position:0 -50px;
        }

div#present div#videoInformation div#videoCPL a.videoThumbnail:hover,
div#present div#videoInformation div#videoCPL a.videoThumbnail:active:hover,
div#present div#videoInformation div#videoCPL a.videoThumbnail:visited:hover {
    /*color: #fff;
    border: 3px solid #004380;*/
}

div#present div#videoInformation div#videoCPL a.videoThumbnail img {
    width: 50px;
    height: 50px;
}

div#present div#videoInformation div#videoCPL a.videoThumbnail .mask {
    background:transparent url(vidInfo_thumb_mask.png) 0 0 no-repeat;
}

div#present div#videoInformation div#videoCPL h1#currentVODTitle {
    /* just a placeholder for now... JS needs this */
}
div#present div#videoInformation div#videoCPL p.currentVODDescription {
    /* just a placeholder for now... JS needs this */
}

div#present div#videoInformation div#videoCPL div#vodWrap {
    position:absolute;
    bottom:39px;
    width:290px;
}

div#present div#videoInformation div#videoCPL div#VODThumbnails {
    /*width: 280px;*/
    /*height: 125px;*/
    height: 108px;
    /*margin-top: -6px;*/
    width:296px !important;
}




/*
 * not using fully qualified selector heirarchy here
 * because we want the option to pull the chat out (say in a new window)
 * and still have it retain it's styling
 *
*/

/* this is the shoutbox that will slide up over #videoCPL */
div#tecChat {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 314px; /* 252px - 11px(right margin) */
    height: 29px;
    /* CHAT OPEN: height: 254px; */
    /* CHAT CLOSED: height: 29px; */
    margin: 0 0 0 0;
    /*padding: 0 0 0 11px;*/
    padding: 0 0 0 0;
    z-index: 558;
    background: #012241 url(../images/chat_bg3.gif) bottom left no-repeat;
    border-top: 1px #00437F solid;
    /*overflow: hidden; --> CANT DO THIS cuz it hides the damn toggle arrow */
}

div#tecChat span#tecChatToggle {
    background:url(../images/chat_arrow.gif) 0 0 no-repeat;
    position: absolute;
    right: 9px;
    top: -9px; /* -10px(height of toggle up image) */
    width:18px;
    height:9px;
    overflow:hidden;
}

/* holds chatter's name & tecChat logo */
div#tecChat div#tecChatHeader {
    position: absolute;
    left: 8px;
    top: 5px;
    width: 295px;
}

/* "Chatting as: <username>" ... first appears on bottom left, but when chat is expanded, sticks top left */
div#tecChat span#tecChatUserInfo {
    margin-top:1px;
    display: block;
    float: left;
    color: #86a5c1;
    text-align: left;
}

/* first appears on bottom right, but when chat is expanded, sticks top right */
div#tecChat img#tecChatLogo {
    display: block;
    float: right;
    text-align: right;
    margin-top: 3px; /* align vertically with "Chatting as: <username>" text */
}



/* log of the conversation */
div#tecChat div#tecChatLog {
    clear: both;
    width: 294px; /* 243px - 8px(padding) */ /* 278 with border */
    height: 235px; /* 200px - 8px(padding) */
    margin: 24px 0 0 10px;
    padding: 0;
    opacity: 0;
    background-color: #fefefe;
    /*border: 1px #667a8d solid;*/
    overflow: auto;
}

/* block area for each logged message */
div#tecChat div#tecChatLog div.tecChatLogEntry {
    display: block;
    clear: both;
}

/* logged message: user name */
div#tecChat div#tecChatLog div.tecChatLogEntry h1 {
    display: block;
    float: left;
    clear: left;
    margin: 0;
    color: #193b5a;
    font-family: "Lucida Grande", "LucidaGrande", "Lucida Sans Unicode",
    Georgia, "Palatino Linotype", "Garamond", Tahoma, Arial, sans-serif; 
    font-size: 11px;
    font-weight: bold;
}

/* logged message: date message was written */
div#tecChat div#tecChatLog div.tecChatLogEntry span {
    display: block;
    float: right;
    clear: right;
    color: #193b5a;
    font-size: 9px;
    font-weight: bold;
}

/* logged message: date message was written */
div#tecChat div#tecChatLog div.tecChatLogEntry p {
    clear:both;
    margin: 0 0 5px 0;
    color: #193b5a;
    font-size: 10px;
    font-weight: normal;
}

/* style the form, rather than killing another div */
div#tecChat form#tecChatForm {
    position: absolute;
    left: 7px;
    bottom: 1px;
    background-color: #012241;
}

/* textbox you can type your message to chat */
div#tecChat form#tecChatForm input#tecChatMessage {
    width: 248px; /* 185px - 6px(padding) */
    height: 16px;
    padding: 2px 0 0 3px;
    color: #4da2c9;
    border: 1px #001b34 solid;
    background: #002f5a;
}




/* main columns that hold the modules -- should be three, but allows for +/- */
div.column {
    float: left;
    width: 30%;
    margin: 44px auto 0 20px;
    text-align: center;
    /*debug*/min-height: 300px;
}



/* this is the holy grail, the "hub module" - a draggable, droppable, widget baby */
div.module {
    position: relative;
    display: block;
    width: 284px; /*default width*/
    margin: 0 auto 24px auto;
    text-align: left;
    font-size: 13px;
    background-color: #fff;
    overflow: hidden; /* havent tested if there are any negative side effects with this yet */
    
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

div.module div.moduleHeader {
    position: relative;
    display: block;
    clear: both;
    /* NOTE: setting width here makes the padding overflow horizontally. so don't do it. width: 100%; */
    height: 24px; /* real height @ 27px - padding-top @ 5px = 22px */
    overflow: hidden;
    padding: 3px 0 0 6px;
    color: #fff;
    background: transparent url(../images/mod_header.gif) 0 0 no-repeat; /*#2f4963 for production*/
    font-size: 13px;
    font-weight: bold;
    margin-bottom:5px;
}



/*
 * HUB MODULE TOGGLE BUTTONS
 *
 */
/* minimize/toggle button @ normal state */
div.module div.moduleHeader a.moduleToggle:link,
div.module div.moduleHeader a.moduleToggle:visited {
    position: absolute;
    top: 9px;
    right: 12px;
    width: 10px;
    height: 7px;
    text-align: right;
    overflow: hidden;
    /*debug*/color: #0D1E2E;
    background: transparent url(../images/module_toggle.gif) 0 0 no-repeat;
}
/* minimize/toggle button @ hover state */
div.module div.moduleHeader a.moduleToggle:hover,
div.module div.moduleHeader a.moduleToggle:active:hover,
div.module div.moduleHeader a.moduleToggle:visited:hover {
    background-position: 0 -7px;
}
/* minimize/toggle button @ down state */
div.module div.moduleHeader a.moduleToggle:active,
div.module div.moduleHeader a.moduleToggle:visited:active {
    background-position: 0 -14px;
}





/*
 * HUB MODULE EXPANDO BUTTONS
 *
 */
/* expand/toggle button @ normal state */
div.module div.moduleHeader a.moduleExpand:link,
div.module div.moduleHeader a.moduleExpand:visited {
    position: absolute;
    top: 7px;
    right: 10px;
    width: 11px;
    height: 11px;
    text-align: right;
    overflow: hidden;
    /*debug*/color: #0D1E2E;
    background: transparent url(../images/module_expand.gif) 0 0 no-repeat;
}
/* minimize/toggle button @ hover state */
div.module div.moduleHeader a.moduleExpand:hover,
div.module div.moduleHeader a.moduleExpand:active:hover,
div.module div.moduleHeader a.moduleExpand:visited:hover {
    background-position: 0 -11px;
}
/* minimize/toggle button @ down state */
div.module div.moduleHeader a.moduleExpand:active,
div.module div.moduleHeader a.moduleExpand:visited:active {
    background-position: 0 -22px;
}



div.module div.moduleFilters {
    display: block;
    clear: both;
    width: 100%;
    margin: 0 0 12px 0; /* bottom margin is exactly 24px; i changed it b/c it looked like too much */
    padding: 4px 0 0 9px;
    color: #7d8d9e;
    overflow: hidden;
}

/* span = "FILTER" word | filters headline ("FILTER") */
div.module div.moduleFilters span {
    display: block;
    float: left;
    font-size: 10px;
    margin-top: 0px; /* align with the filter icons */
}


div.module div.moduleFilters a:link,
div.module div.moduleFilters a:active,
div.module div.moduleFilters a:visited {
    display: block;
    float: left;
    width: 12px;
    height: 17px;
    margin-left: 10px;
}

div.module div.moduleFilters a.filterAll {
    background: transparent url(../images/module_filter_all.gif) 0 0 no-repeat;
}
div.module div.moduleFilters a.filterTEC {
    background: transparent url(../images/module_filter_tec.gif) 0 0 no-repeat;
}
div.module div.moduleFilters a.filterFacebook {
    background: transparent url(../images/module_filter_facebook.gif) 0 0 no-repeat;
}
div.module div.moduleFilters a.filterTwitter {
    background: transparent url(../images/module_filter_twitter.gif) 0 0 no-repeat;
}
div.module div.moduleFilters a.filterLink { /* ******** WAITING ON CHRIS ********** */
    background: transparent url(../images/module_filter_twitter.gif) 0 0 no-repeat;
}
div.module div.moduleFilters a.filterDocument { /* ******** WAITING ON CHRIS ********** */
    background: transparent url(../images/module_filter_twitter.gif) 0 0 no-repeat;
}


div.module div.moduleFilters a:hover {
    background-position: 0 -22px;
    /* margin-bottom for a raised effect */
    margin-top: -2px;
}


/* this one's mostly only used for "featured content", which is why it's a div */
div.module div.moduleContent {
    display: block;
    width: 270px;
    margin: 0 auto;
    font-size: 13px;
    overflow: auto;
}

div.module ul.moduleContent {
    display: block;
    list-style: none;
    font-size: 13px;
}

div.module ul.moduleContent li {
    display: block;
    list-style: none;
    margin: 0 0 16px 0;
    padding: 2px 9px 2px 30px;
    background-position: 10px -17px;
    background-repeat: no-repeat;
    clear: both; /* needed for IE */
    color:#333;
}

/* chris says no.
div.module ul.moduleContent li:hover {
    /*background-color: #eee !important;* /
}*/

div.module ul.moduleContent li.typeAll {
    background-image: url(../images/module_filter_all.gif);
}

div.module ul.moduleContent li.typeTEC {
    background-image: url(../images/module_filter_tec.gif);
}

div.module ul.moduleContent li.typeCNN {
    background-image: url(../images/module_filter_cnn.gif);
}

div.module ul.moduleContent li.typeFacebook {
    background-image: url(../images/module_filter_facebook.gif);
}

div.module ul.moduleContent li.typeTwitter {
    background-image: url(../images/module_filter_twitter.gif);
}

div.module ul.moduleContent li.typeLink {
    background-image: url(../images/module_filter_link.gif);
}

div.module ul.moduleContent li.typeDocument {
    background-image: url(../images/module_filter_doc.gif);
}

div.module ul.moduleContent li.typeCalendar {
    padding: 2px 9px 2px 9px;
}
div.module ul.moduleContent li.typeCalendar span {
    display: block;
    float: left;
    width: 45px;
    height: 24px;
    margin-right: 10px;
    overflow: hidden;
    background: url(../images/module_filter_calendar.gif) 1px 15px no-repeat;
    font-size: 12px;
}

div.module ul.moduleContent li.typeBloggingBishops,
div.module ul.moduleContent li.typeBloggersOnTheGround,
div.module ul.moduleContent li.typeFunFact,
div.module ul.moduleContent li.typeFAQ {
    background-position: 11px 5px;
}

div.module ul.moduleContent li.typeBloggingBishops {
    background-image: url(../images/mod_blueBall.png);
}
div.module ul.moduleContent li.typeBloggersOnTheGround {
    background-image: url(../images/mod_yellowBall.png);
}

div.module ul.moduleContent li.typeFunFact {
    background-image: url(../images/mod_blueBall.png);
}

div.module ul.moduleContent li.typeFAQ {
    background-image: url(../images/mod_yellowBall.png);
}


    
    /*div#Calendar div.jScrollPaneContainer {*/
    div.module div.jScrollPaneContainer {
        border-bottom:1px solid #d7d7d7;   
    }
    
    div.module div.moduleLegend {
        /*position:absolute;
        bottom:4px;
        right:13px;*/
        text-align: center;
    }
    div.module div.moduleLegend img {
        margin: 8px auto;
    }
    
    div.module div.moduleLegend a:link,
    div.module div.moduleLegend a:active,
    div.module div.moduleLegend a:visited {
        color:#0077c6;
        text-decoration:none;
        font-size:10px;
    }

div.module ul.moduleContent li.typeCalendar span.eventNone {
    background: transparent url();
}
div.module ul.moduleContent li.typeCalendar span.eventLive {
    background-position: 1px 17px;
}
div.module ul.moduleContent li.typeCalendar span.eventOnDemand {
    background-position: 1px -30px;
}
div.module ul.moduleContent li.typeCalendar span.eventLiveSP {
    background-position: 1px -79px;
}
div.module ul.moduleContent li.typeCalendar span.eventOnDemandSP {
    background-position: 1px -126px;
}

div.module ul.moduleContent li.typeLegislation {
    padding: 2px 9px 2px 9px;
    clear: both !important;
}
div.module ul.moduleContent li.typeLegislation span {
    display: block;
    float: left;
    width: 35px;
    height: 30px;
    margin-right: 10px;
    overflow: hidden;
    font-size: 12px;
}



/*
 activityStream // 511
Calendar // 284
featuredMultimedia // 203
legislationTracker // 220
?? // 268
*/
/* 71px bt module and mod content */
/* activity stream faux scroll bars */
div#activityStream.module {
    height: 511px;
}
div#activityStream.module ul.moduleContent {
    height: 450px;
    margin-top:0;
}

/* calendar faux scroll bars */
div#Calendar.module {
    height: 284px;
}
div#Calendar.module ul.moduleContent {
    height: 224px;
    margin-top:0;
}

/* featured multimedia faux scroll bars */
div#featuredMultimedia.module {
    height: 203px;
}
div#featuredMultimedia.module div.moduleContent {
    height: 159px;
    margin: 0 auto;
    margin-left: 13px;
}


div#featuredMultimedia.module div.moduleContent a.featWrap {
    overflow:hidden;
    width:258px;
    height:153px;
    display:block;
    margin-top:5px;
}


div#featuredMultimedia.module div.jScrollPaneContainer {
    border-bottom:none;
}

div#featuredMultimedia.module div.moduleContent a.dailyWrapFeat {
    overflow:hidden;
    width:258px;
    height:153px;
    /*background:transparent url(../images/dailyWrap.jpg) 0 0 no-repeat;*/
    display:block;
    margin-top:6px;
    position:relative;
}

        div#featuredMultimedia.module div.moduleContent a.dailyWrapFeat div.featMask {
        position:absolute;
        top:0;
        left:0;
        width:258px;
        height:153px;
        overflow:hidden;
        background:url(../images/featMultMask.png) 0 0 no-repeat;
    }
        
        div#featuredMultimedia.module div.moduleContent a.dailyWrapFeat div.featMask:hover {
            background-position:0 -153px;
        }

div#featuredMultimedia.module div.moduleContent a.dailyWrapFeat:hover {
    background-position:0 -147px;
}

div#legislationTracker.module {
    height: 219px;
}

div#legislationTracker.module div.moduleContent {
    height: 163px;
    margin-top:0;
}

div#legislationTracker.module ul.moduleContent  {
    height:163px;
    margin-top:0;
}

div#conventionResources.module {
    height: 268px;
}
div#conventionResources.module div.moduleContent {
    height: 197px;
}

div#conventionResources.module ul.moduleContent {
    margin-top:0;
    height:210px;
}

div#conventionResources.module ul.moduleContent li a,
div#conventionResources.module ul.moduleContent li a:visited {
    color:#333;
    text-decoration:none;
}

/* here's a "fake" link, it looks like a link, but doesn't go anywhere (it's just cosmetic) */
div#legislationTracker.module ul.moduleContent li.fauxLink {
    color: #000046;
    cursor: pointer;
}

div#legislationTracker.module div.moduleContent li.fauxLink:hover {
    color: #003c96;
    text-decoration: underline;
}

div#legislationTracker.module div.moduleLegend {
    text-align: left;
}

div#legislationTracker.module div.moduleLegend {
    text-align: left;
}

div#legislationTracker.module div.moduleLegend input#legislationSearch {
    width: 250px;
    float: left;
    margin: 2px 0 0 8px;
    padding: 1px;
    font-size: 11px;
    border: 1px #d7d7d7 solid;
    color:#333;
}

div#legislationTracker.module div.moduleLegend img#legislationTrackerSearchLoading {
    display: none;
    float: right;
    margin: 3px 5px 0 0;
    padding: 0;
}

/* news coverage */
div#newsCoverage.module {
    height: 268px;
}
div#newsCoverage.module ul.moduleContent {
    height: 208px;
    margin-top:0;
}

/* official blogs */
div#officialBlogs.module {
    height: 268px;
}
div#officialBlogs.module ul.moduleContent {
    margin-top:0;
    height: 208px;
}

/* fun facts and F.A.Q. */
div#FunFactsFAQ.module {
    height: 268px;
}
div#FunFactsFAQ.module ul.moduleContent {
    margin-top:0;
    height: 208px;
}

div#newsCoverage.module ul.moduleContent a:link,
div#newsCoverage.module ul.moduleContent a:active,
div#newsCoverage.module ul.moduleContent a:visited,
div#officialBlogs.module ul.moduleContent a:link,
div#officialBlogs.module ul.moduleContent a:active,
div#officialBlogs.module ul.moduleContent a:visited,
div#FunFactsFAQ.module ul.moduleContent a:link,
div#FunFactsFAQ.module ul.moduleContent a:active,
div#FunFactsFAQ.module ul.moduleContent a:visited {
    text-decoration:none;
    color:#0077c6;
}


span.moduleReadMore {
    color:#989898;
    font-size:11px;
    font-style:italic;
    text-decoration:none;
}


.jScrollPaneContainer {

}



/*
 * contact us and feedback links, below the flickr
 *
 */
div#contactUs {
    width: 400px;
    text-align: center;
    margin: 0 auto;
    color: #bababa;
}

div#contactUs a,
div#contactUs a:link,
div#contactUs a:active,
div#contactUs a:visited {
    clear: none;
    padding: 5px;
    margin: 0 auto;
    color: #00c0ff;
    text-decoration: none;
    font-size: 12px;
}

div#contactUs a:hover,
div#contactUs a:active:hover,
div#contactUs a:visited:hover {
    color: #003565;
    text-decoration: underline;
}



/*
 * horizontal flickr wall
 *
 */

div#flickrWrap {
    background-attachment:scroll;
    background-color:transparent;
    background-image:url(../images/flickrBG.png);
    background-position:center bottom;
    background-repeat:no-repeat;
    margin-top: 45px;
    width:1008px;
    position:relative;
}

    div#flickrWrap a.flickrLink:link,
    div#flickrWrap a.flickrLink:active,
    div#flickrWrap a.flickrLink:visited {
        top: -25px;
        font-size: 12px;
        left:431px;
        position:absolute;
        text-decoration:none;
        color:#0077C6;
    }
    
    div#flickrWrap a.flickrLink:hover {
        text-decoration:underline;
    }

ul#flickr {
    display: block;
    list-style: none;
    width: 912px; /* important: this breaks the thumbnails into rows! */
    margin-left: 38px; /* and this centers it within the hub =) */
    margin-bottom:4px;
}

ul#flickr li {
    display: block;
    width: 75px;
    height: 75px;
    float: left;
    list-style: none;
    text-align: center;
    margin:0 1px 1px 0;
}

ul#flickr li img {
    width: 75px;
    height: 75px;
}

div.footer {
    background-color:#bababa;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    -webkit-border-radius-topleft: 6px;
    -webkit-border-radius-topright: 6px; /* no rounded corner love for you, IE! */
    position:relative;
}

div.footer ul {
    margin:0;
    padding:15px;
    list-style:none;
    font-size:12px;
}
div.footer ul li {
    display:inline;
}

div.footer ul li a,
div.footer ul li a:active,
div.footer ul li a:visited {
    color:#333;
    text-decoration:none;
    margin-right:25px;
}

div.footer ul a:hover {
    color:#333;
}

div.footer span.copyright {
    bottom:16px;
    color:#333333;
    font-size:9px;
    position:absolute;
    right:57px;
}




/* jQuery tooltips */
.qtip {
    font-size: 12px;
}

/* full view for legislation tracker - loading gif */
div#sbFromURL {
    color: #000;
    background-color: #fff;
    padding: 10px;
}

img.sbFromURLLoading {
    position: relative;
    width: 32px;
    height: 32px;
    margin: 50px auto 0 50px;
}

/* give the leg. content some style */

div#sbFromURL table {
    width:100%;
    color:#333;
}

div#sbFromURL table tbody tr td i {
    font-style:normal;
    font-size:13px;
}

div#sbFromURL table tbody tr td b {
    font-size:13px;
}

div#sbFromURL  p {
    font-size: 12px;
    color:#333;
}

div#sbFromURL hr {
 margin: 10px 0;
}

div.growl {
    display: none;
    /*debug*/position: absolute;
    /*debug*/top: 520px;
    /*debug*/left: 150px;
    clear: both;
    width: 800px;
    height: 46px;
    overflow: hidden;
    margin: auto;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

/* these img tags are just fallback, in case CSS doesnt
   work, they'll still get the growl-caps.. kinda */
div.growl div.growl-cap-left img,
div.growl div.growl-cap-right img{
    display: none !important;
}

/* general note: make these a friggin sprite... enough with this 30-something images nonsense! */

div.growl div.growl-cap-left {
    display: block;
    float: left;
    width: 20px;
    height: 46px;
    background: transparent url(../sample_data/hub_growl_navy_left.png) 0 0 no-repeat; /*needs actual bg color fallback in production*/
}

div.growl div.growl-cap-right {
    display: block;
    float: right;
    width: 20px;
    height: 46px;
    background: transparent url(../sample_data/hub_growl_navy_right.png) 0 0 no-repeat; /*needs actual bg color fallback in production*/
}

div.growl div.growl-message {
    display: block;
    float: left;
    width: 750px;
    height: 46px;
    padding: 1px 5px;
    background: transparent url(../sample_data/hub_growl_navy_bg.png) 0 0 repeat-x; /*needs actual bg color fallback in production*/
}

div#present div#videoPlayer div#playerWrap {
    margin:1px 0 0 9px;
    width:643px;
    height:362px;
    overflow:hidden;
    display:block;
}

.ui-sortable-placeholder {
    background-color:#AAAAAA !important;
    border:1px solid #999999;
    height:100px;
    visibility:visible !important;
}
.ui-sortable-placeholder {
    background-color:#AAAAAA !important;
    border:1px solid #999999;
    height:100px;
    visibility:visible !important;
}

#tecChatForm fieldset { border: 0 }
#tecChatForm #sb_submit { display: none }
#tecChatForm #sb_msg {
    width: 290px;
    padding:2px;
    margin:0 0 4px 3px;
    border:none;
}
#shouts {
    height:226px;
    width:286px;
    overflow:hidden;
    padding:4px;
}