/*

=CSS Reset ......................................... Line:   47

=Layout ............................................ Line:   74
    =Element Base .................................. Line:   81
    =Layout Base ................................... Line:   95
    =Layout Overrides .............................. Line:  153
     
=Forms ............................................. Line:  168

=Content Styling ................................... Line:  182
    =Element Base .................................. Line:  188
    =Globals ....................................... Line:  199
    =Page .......................................... Line:  203
    =Masthead ...................................... Line:  212
    =Navigation .................................... Line:  260
    =Footer ........................................ Line:  393
    =Control Styles ................................ Line:  437
        -Pager Control ............................. Line:  440
        -Tab Strips ................................ Line:  502
        -Base Tab View / Sections .................. Line:  548
        -Tab Content Styles ........................ Line:  571
        -Specific Tab Content Sections ............. Line:  593
            *Photo Scroller ........................ Line:  596
            *Video Scroller ........................ Line:  679
            *Stories Scroller ...................... Line:  770
            *Content Items Table ................... Line:  799  
        -Top Contributers Module ................... Line:  879
    =Special Styles ................................ Line:  998
        -Time Frame Selector ....................... Line: 1017
        -Content Type Selector ..................... Line: 1060
        -Grind Panel ............................... Line: 1102
        -Story Details Panel ....................... Line: 1187
        -User Info Panel ........................... Line: 1249
        -Graphic and User Panel .................... Line: 1288
        -Video Details Panel ....................... Line: 1316
        -The Daily Grind Blog Link ................. Line: 1351
        -Submit to Global Grind Link ............... Line: 1377
        -User and Search Panel ..................... Line: 1403            
*/


/******************************************************
-------------------------------------------------------

	=CSS Reset

-------------------------------------------------------	
*******************************************************/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin: 0; padding: 0;}

h1, h2, h3, h4, h5, h6 { font-size: 100%; }

ol, ul { list-style: none; }

address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }

table { border-collapse: collapse; border-spacing: 0; }

fieldset, img { border: 0; }

caption, th { text-align: left; }

q:before, q:after { content: ''; }

a { text-decoration: none; }


/******************************************************
-------------------------------------------------------

	=Layout

-------------------------------------------------------	
*******************************************************/


/******************************************************
	=Element Base
*******************************************************/
 
html
{

}

body
{
    text-align: center;    
}

/******************************************************
	=Layout Base
*******************************************************/

#page
{
    width: 100%;
    text-align: center;    
    position: relative;
} 

    #masthead
    {
        text-align: left;
    }

        #masthead .wrapper
        {
            width: 950px;
            margin: 0 auto;
            position: relative;
        }

    #content
    {
        width: 950px;        
        margin: 45px auto 0;
        text-align: left;
        position: relative;
        overflow: hidden;        
    }

        #primary
        {
            width: 630px;
            float: left;
        }
    
        #secondary
        {
            width: 300px;            
            float: right;       
        }
    
        #additional
        { 
            width: 25%;
            height: 100%;            
            float: left;
        }
    
    #footer
    {
        clear: both;
    }
    
/******************************************************
	=Layout Overrides
*******************************************************/    
/*

Do not use for now. 
Will implement after change list for use at a later time if desired.

    #Content.Alternate #Primary{ float: right; margin: 0; width: 760px;  }
    #Content.Alternate #Secondary{ left: 0; margin-right: 10px; }
*/


/******************************************************
-------------------------------------------------------

	=Forms

-------------------------------------------------------	
*******************************************************/



/******************************************************
-------------------------------------------------------

	=Content Styling

-------------------------------------------------------	
*******************************************************/

/******************************************************
	=Element Base
*******************************************************/

body
{
    font-family:"Arial", "Lucida Grande","Tahoma","Verdana", Sans-Serif;
    font-size: 9pt;
    background: #333;
}

/******************************************************
	=Globals
*******************************************************
            
/******************************************************
	=Page
*******************************************************/

#page
{
    background: url('../Images/Page-Background.gif') repeat-x 0 161px;
}

/******************************************************
	=Masthead
*******************************************************/

#masthead
{
    height: 110px;    
    position: relative;    
    background: black;
}

    #masthead h1
    {
        font-size: 200%;
        text-indent: 5px;
        line-height: 94px;
        margin-left: 20px;
    }
    
        #masthead h1 a 
        { 
            color: White;
            display: block;
            width: 187px;
            height: 94px;
            position: relative;            
            overflow: hidden;
        }
        
            #masthead h1 a em
            {
                display: block;
                width: 187px;
                height: 94px;                
                position: absolute;
                top: 0;
                left: 0;
                background: url('../Images/Logo.png') no-repeat;
            } 

    #masthead #bannerAd
    {
        position: absolute;
        top: 0;
        right: 0;
    }


/******************************************************
	=Navigation
*******************************************************/

#navigation{ background: #000000 url('../Images/Navigation-Background.png') repeat-x left 26px }

    #navigation ul.contentTabs
    {
        display: block;
        width: 950px; 
        height: 26px;     
        margin: 0 auto;
        line-height: 26px;
        text-align: left;
        color: White;
        text-transform: uppercase;  
    }
    
        #navigation ul.contentTabs li
        {
            float: left;
            display: block;
            margin-right: 2px;        
        }
        
            #navigation ul.contentTabs li a
            {
                position: relative;
                display: block;
                width: 170px;
                height: 26px;
                overflow: hidden;
            }
            
                #navigation ul.contentTabs li a em
                {
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: block;
                    width: 170px;
                    height: 26px;
                    cursor: pointer;
                }
            
                #navigation ul.contentTabs li a em.TheGrind,
                #navigation ul.contentTabs li a:hover em.TheGrind
                { background: url('../Images/TheGrind-Tab.gif') }
                
                #navigation ul.contentTabs li a em.GrindTV,
                #navigation ul.contentTabs li a:hover em.GrindTV
                { background: url('../Images/GrindTV-Tab.gif') }
                
                #navigation ul.contentTabs li a em.GrindMusic,
                #navigation ul.contentTabs li a:hover em.GrindMusic
                { background: url('../Images/GrindMusic-Tab.gif') }
                
                #navigation ul.contentTabs li a em.MyGrind,
                #navigation ul.contentTabs li a:hover em.MyGrind
                { background: url('../Images/MyGrind-Tab.gif') }
            

#navItems
{
    display: block; 
    width: 950px;   
    overflow: hidden;    
    padding: 0 10px;
    margin: 0 auto;    
}

    #navItems li
    {
        display: block;
        float: left;        
    }

        #navItems li a
        {
            float: left;        
            display: block;
            height: 23px;
            line-height: 22px;
            font-size: 10pt;                
            color: #fff;
            padding: 0 10px;
            border: solid 1px #7ab615;
            border-right-color: #5a962b;
            border-bottom: none;                              
        }
        
        #navItems li a:hover
        {
            border-color: #408315;      
            background: #7ebb15 url('../Images/Navigation-Background.png') repeat-x 0 -25px;    
        }


    #navItems li.home a
    {
        display: block;
        width: 57px;
        padding: 0;
        position: relative;
        overflow: hidden;    
    }

        #navItems li.home a em
        {
            display: block;
            width: 57px;
            height: 23px;
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
            background: #7ebb15 url('../Images/HomeLink-Background.gif') no-repeat;    
        }
    
        #navItems li.home a:hover em
        {
            border-color: #408315;      
            background: #7ebb15 url('../Images/HomeLink-Background.gif') no-repeat left -24px;    
        }

    #navItems li.active a
    { 
        border-color: #408315;      
        background: #7ebb15 url('../Images/Navigation-Background.png') repeat-x 0 -25px; 
    }       
     
    #navItems li.active a em
    { 
        border-color: #408315;          
        background: #7ebb15 url('../Images/HomeLink-Background.gif') no-repeat 0 -24px;  
    }

    

#subNavigation{ background: #000000 url('../Images/SubNavigation-Background.gif') repeat-x left top }

#subNavItems
{
    display: block; 
    width: 950px;   
    overflow: hidden;    
    padding: 8px 10px;
    margin: 0 auto;    
}

    #subNavItems li
    {
        display: block;
        float: left;     
        height: 11px;
        line-height: 11px;
        margin: 0 2px;         
    }

        #subNavItems li a
        {
            float: left;        
            display: block;
            height: 12px;
            line-height: 12px;
            font-size: 10pt;                
            color: #fff;
            padding: 0 10px;
            border-right: solid 1px #ffffff;
            text-decoration: underline;
            font-size: 8pt;                         
        }
        
        #subNavItems li.last a {border: none}
        
        #subNavItems li a:hover
        {
            color: #bff32e;      
        }
        
        #subNavItems li.active a { color: #bff32e; }
        
/******************************************************
	=Footer
*******************************************************/

.footerPlacer
{
    margin: 0 auto;
    width: 950px;
    overflow: hidden;
}

#footer
{    
    overflow: hidden;
    float: left;
    width: 630px;
    margin-bottom: 20px;
    border-top: solid 2px #333333;
    background: #929292 url('../Images/Footer-Left.gif') no-repeat left bottom;
}

    #footer .footerWrap
    {
        float: right;
        overflow: hidden;
        padding: 30px 40px 75px 30px;       
        margin-left: 10px;
        width: 550px;
        background: #929292 url('../Images/Footer-Right.gif') no-repeat right bottom; 
    }

        #footer .well
        {        
            float: left;
            margin-right: 40px;
        }

            #footer .well h5
            {
                color: #bff32e;
                margin-bottom: 5px;
            }
            
            #footer .well ul li a
            {
                font-size: 8pt;
                color: White;
                text-decoration: underline;
            }        
        
       .footerRegSpecialCase
       {
            position: relative;
            top: -220px;
       }
        
/******************************************************
	=Control Styles
*******************************************************

-Pager Control
************************************/

.pager
{
    position: absolute;
    bottom: 20px;
    right: 25px;
    overflow: hidden;
    background: url('../Images/Pager-Right.gif') no-repeat right bottom;
} 

    .pager ul
    {
        float: left;
        padding: 0 10px;
        background: url('../Images/Pager-Left.gif') no-repeat left bottom;
    }
        
        .pager ul li
        {
            float: left;
        }
        
            .pager ul li a
            {
                display: block;
                width: 10px;
                height: 18px;
                line-height: 18px;
                overflow: hidden;
                position: relative;
                margin: 0 2px;
                text-align: center;
                text-decoration: underline;
                font-weight: bold;
                font-size: 8pt;
                color: #4470c0;                
            }
            
            .backNextPager ul li a { width: auto; }
            
            .pager ul li.current a
            {
                color: #6b6b6b;
                text-decoration: none;
            }

            .pager ul li a em
            {
                display: block;
                height: 17px;
                width: 10px;
                position: absolute;
                top: 0;
                left: 0;
                background: white no-repeat center center;
                cursor: pointer;
            }
                        
            .pager ul li.previous a em { background-image: url('../Images/Pager-Previous.gif') }
            .pager ul li.next a em { background-image: url('../Images/Pager-Next.gif')}

/*
            
-Tab Strips
************************************/

.tabs
{
    display: block;  
    height: 20px;
    float: right;    
}

    .tabs li
    {
        display: block;
        float: left;
        background: url('../Images/Tab-Right.gif') no-repeat right top;        
    }

        .tabs li a
        {
            float: left;        
            display: block;
            height: 20px;
            width: 85px;            
            line-height: 20px;
            font-size: 8pt;
            font-weight: bold;                
            color: #fff;
            text-transform: uppercase;
            text-align: center;
            padding: 0 5px 0 15px;
            background: url('../Images/Tab-Left.gif') no-repeat left top;                                              
        }
        
    .tabs li.active
    {
        background: url('../Images/Tab-Right.gif') no-repeat right -21px;        
    }
    
    .tabs li.active a
    {
        color: #408315;
        background: url('../Images/Tab-Left.gif') no-repeat left -21px;            
    }
    
/*

-Base Tab Views / Sections
************************************/

.tabView
{
    width: 630px;
    float: left;
    clear: both;
    position: relative;
    background: #e0e0e0;
}

    .tabContentSection
    {
        position: relative;
        height: 1%; /*IE7 needs HasLayout*/
        border-bottom: solid 1px #e0e0e0; /* Need this border here. Trickery to keep positioning context */
    }
    
    .tabView .sub { margin-top: 30px; padding-bottom: 30px; }

/*

-Tab Content Styles
************************************/

.tabView .contentTitle
{
    display: block;
    height: 25px;
    line-height: 25px;
    font-size: 12pt;
    color: #bff32e;
    background: #6b6b6b;
    padding: 0 10px 0 45px;
    margin-bottom: 8px;
    text-align: right;
    float: left;
    clear: both;
}

    .tabView .contentTitle span { color: White }

/*

-Specific Tab Content Sections
************************************
   
*Photo Scroller
-----------------------------------*/

.photoScroller
{
    overflow: hidden;
    clear: both;
    margin-bottom: 37px;
    border: solid 1px #6b6b6b;
    border-right: none;
    border-left: none;
    background: white;
    text-align: center;
}

    .photoScroller .photos
    {
        overflow: hidden;
        width: 562px;
        text-align: center;
        margin: 10px auto;
    }
    
        .photoScroller .photos li
        {
            display: block;
            width: 100px;
            margin-right: 13px;
            float: left;
            
        }         
            .photoScroller .photos li.last { margin: 0 }
            
            .photoScroller .photos li span 
            {
                display: block; 
                margin: 2px 0; 
                text-transform: lowercase;
                color: #6b6b6b;
            }
            
            .photoScroller .photos li a 
            {
                color: #4470c0;
                text-decoration: underline;                 
            }
            
        .photoScroller .photos img
        {
            border: solid 1px #898989;
        }

    .photoScroller a.next,
    .photoScroller a.previous
    {
        display: block;
        height: 100px;
        width: 10px;
        position: absolute;
        overflow: hidden;
        background: white no-repeat center center;
    }        
    
        .photoScroller a.next em,
        .photoScroller a.previous em
        {
            display: block;
            height: 100px;
            width: 10px;
            position: absolute;
            top: 0;
            left: 0;
            background: white no-repeat center center;
            cursor: pointer;
        }

    .photoScroller a.next{ right: 10px; top: 45px }
        .photoScroller a.next em{ background-image: url('../Images/Pager-Next.gif')}                      
    
    .photoScroller a.previous{ left: 10px; top: 45px }
        .photoScroller a.previous em{ background-image: url('../Images/Pager-Previous.gif') }
            
/*
            
*Video Scroller
-----------------------------------*/

.videoScroller
{
    overflow: hidden;
    clear: both;
    margin-bottom: 37px;
    border: solid 1px #6b6b6b;
    border-right: none;
    border-left: none;
    background: white;
    text-align: center;
}

    .videoScroller .videos    
    {
        overflow: hidden;
        height: 320px;
        width: 562px;
        text-align: left;
        margin: 0 auto;
        position: relative;
        background: #ffffff url('../Images/VideoScroller-Background.gif') repeat-x -10px center;    
    }
    
        .videoScroller .videos li
        {
            display: block;
            overflow: hidden;
            height: 140px;
            width: 260px;
            position: absolute;
            float: left;      
        }
        
            .videoScroller .videos li.first
            {
                top: 10px;
                left: 0;
            }

            .videoScroller .videos li.second
            {
                top: 10px;
                right: 0;
            }

            .videoScroller .videos li.third
            {
                bottom: 10px;
                left: 0;
            }

            .videoScroller .videos li.fourth
            {
                bottom: 10px;
                right: 0;
            }
            
    .videoScroller a.next,
    .videoScroller a.previous
    {
        display: block;
        height: 300px;
        width: 10px;
        position: absolute;
        overflow: hidden;
        background: white no-repeat center 140px;
    }        
    
        .videoScroller a.next em,
        .videoScroller a.previous em
        {
            display: block;
            height: 300px;
            width: 10px;
            position: absolute;
            top: 0;
            left: 0;
            background: white no-repeat center 140px;
            cursor: pointer;
        }

    .videoScroller a.next{ right: 10px; top: 45px }
        .videoScroller a.next em{ background-image: url('../Images/Pager-Next.gif')}                      
    
    .videoScroller a.previous{ left: 10px; top: 45px }
        .videoScroller a.previous em{ background-image: url('../Images/Pager-Previous.gif') }            

/*

*Stories Scroller
-----------------------------------*/
        
.storiesScroller
{
    overflow: hidden;
    clear: both;
    height: 1%;
    margin-bottom: 37px;
    padding: 10px 0;
    border: solid 1px #6b6b6b;
    border-right: none;
    border-left: none;
    background: white;
    text-align: left;
}

    .storiesScroller li
    {
        overflow: hidden;
        height: 1%;
        padding: 5px 40px;
        position: relative;
        border-bottom: dotted 2px #dedede;        
    }

/*

*detailsScroller
-----------------------------------*/
.detailsScroller { width: 590px; padding: 20px;}



/*

*Content Items Table
-----------------------------------*/

.tableWrapper
{    
    position: relative;
    border-bottom: solid 1px #6b6b6b;
    padding-bottom: 5px;
    margin-bottom: 30px;
    background: white;
    float: left;
}


    .tableWrapper .pager
    {
        bottom: -18px;
    }

.contentItemsTable
{
    overflow: hidden;
    clear: both;
    height: 1%;   
    text-align: left;
    width: 630px;
    padding-bottom: 10px;
    background: white;
    margin-bottom: 30px;
}

    .contentItemsTable th
    {
        height: 25px;
        line-height: 15px;
        background: url('../Images/ContentItemsTable-TH-Background.gif') repeat-x;
    }
    
    .contentItemsTable th.active { background: url('../Images/ContentItemsTable-TH-Background.gif') repeat-x left -26px;}

        .contentItemsTable th span
        {
            display: block;
            padding: 2px 12px 0 5px;
            line-height: 15px;
        }
        
        .contentItemsTable th.active span { font-weight: bold; background: url('../Images/ContentItemsTable-TH-Active-Arrow.gif') no-repeat right 5px;}


.contentItemsTable th.rating{width: 122px;}
.contentItemsTable th.description{ width: 302px; }
.contentItemsTable th.description span{width: 302px; border-left: solid 1px #6b6b6b; border-right: solid 1px #6b6b6b }
.contentItemsTable th.date {width: 70px }
.contentItemsTable th.grinder { width: 85px; }
.contentItemsTable th.grinder span{ width: 85px; border-left: solid 1px #6b6b6b; border-right: solid 1px #6b6b6b}
.contentItemsTable th.type {width: 51px }

.contentItemsTable tr{ width: 630px; }
.contentItemsTable tr.head{ border-bottom: none }

.contentItemsTable td.rating {text-align: center; width: 122px }
    .contentItemsTable td.rating .grindPanel {float: none; margin: 0 auto;}
    
.contentItemsTable td.description {width: 302px }
    .contentItemsTable td.description .storyDetailsPanel { margin: 0; width: auto; }
    
.contentItemsTable td.date { width: 70px; }
    .contentItemsTable td.date span { display: block; text-align: center; font-size: 8pt; }

.contentItemsTable td.grinder { text-align: center; width: 85px}
    .contentItemsTable td.grinder img { margin: 0 auto; }
    .contentItemsTable td.grinder a { font-size: 8pt; color: #6b8cc8; text-decoration: underline; display: block;}
    
.contentItemsTable td.type {text-align: center; width: 51px}
    .contentItemsTable td.type img { margin: 0 auto; }

.contentItemsTable td{padding-top: 20px; padding-bottom: 20px; border-bottom: dotted 2px #dedede;}

/*

Top Contributers Module
************************************/

.topContributers
{
    margin: 10px 0;
    background: #dedede;
}

    .topContributers h5
    {
        line-height: 34px;
        height: 34px;
        font-size: 12pt;
        background: url('../Images/TopContributers-Right.gif') no-repeat right top;
    }

        .topContributers h5 span
        {
            float: left;
            padding-left: 15px;
            color: White;
            background: url('../Images/TopContributers-Left.gif') no-repeat left top;        
        }

            .topContributers h5 span em
            {
                color: #bff32e;
                font-weight: bold;
            }
            
    .topContributers .criteriaWrap
    {
        line-height: 20px;
        height: 20px;
        color: White;
        padding: 0 5px;
        border: solid 1px #6b6b6b;
        border-bottom: solid 1px #000000;
        background: #555555;
    }
        .topContributers .criteriaWrap em {float: left}
        
        .topContributers .criteriaWrap .selector
        {
            float: left;
            width: 120px;
            height: 20px;
            display: block;
            text-align: center;
            position: relative;
            left: 10px;
        }


            .topContributers .criteriaWrap .selector a.next,
            .topContributers .criteriaWrap .selector a.previous
            {
                display: block;
                height: 20px;
                width: 10px;
                position: absolute;
                overflow: hidden;
                background: #515151 no-repeat center center;
            }        
            
                .topContributers .criteriaWrap .selector a.next em,
                .topContributers .criteriaWrap .selector a.previous em
                {
                    display: block;
                    height: 20px;
                    width: 10px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: #515151 no-repeat center center;
                    cursor: pointer;
                }

            .topContributers .criteriaWrap .selector a.next{ right: 0; top: 0 }
                .topContributers .criteriaWrap .selector a.next em{ background-image: url('../Images/TopContributers-Next.gif')}                      
            
            .topContributers .criteriaWrap .selector a.previous{ left: 0; top: 0 }
                .topContributers .criteriaWrap .selector a.previous em{ background-image: url('../Images/TopContributers-Previous.gif') }
            
    .topContributers table
    {
        width: 100%;
        font-size: 8pt;
        border-left: solid 1px #6b6b6b;
        border-right: solid 1px #6b6b6b;
    }
       
        .topContributers table th
        {   
            color: White;
            background: #898989;
            height: 21px;
            line-height: 21px;
            padding: 0 5px;
            font-weight: bold;
            border-bottom: solid 1px #000000;
        }

            .topContributers table tr.alternate{ background: white }
                    
            .topContributers table th.category{ width: 30%; text-align: center;}
            .topContributers table th.username{ width: 55%; border: solid 1px #c8c8c8; border-top: none; border-bottom: solid 1px #000000; }
            .topContributers table th.criteria{ width: 30%; text-align: center;}

            .topContributers table th.active{ background: #7ab615 }

            .topContributers table td{ padding: 0 3px }
            .topContributers table td.category{ width: 30%; text-align: center;}
            .topContributers table td.username{ width: 55%; padding: 2px 0 2px 5px; border: solid 1px #c8c8c8; border-top: none; border-bottom: none }
                .topContributers table td.username a.user{ color: #4470c0; font-weight: bold; position: relative; top: -10px;}

            .topContributers table td.criteria{ width: 30%; text-align: center;}                            
        
/******************************************************
	=Special Styles
*******************************************************/

.chooseViewLabel
{
    display: block;
    height: 20px;
    line-height: 20px;
    padding: 0 35px 0 62px;
    text-transform: uppercase;
    font-size: 8pt;
    font-weight: bold;
    float: left;
    color: #bff32e;    
    background: #333333 url('../Images/ChooseViewLabel-Background.gif') no-repeat right center;
}

/*

-Time Frame Selector
************************************/

.timeFrame
{
    position: absolute;
    top: 10px;
    right: 5px;
    color: #6b6b6b;
    height: 1%;
    z-index: 9999;
    clear: both;    
    text-align: right;
    font-size: 8pt;    
    width: 240px; /* Prevents wrapping in Safari */
}

.timeFrame span
{
    float: left;
    text-align: right;
    font-weight: bold;    
}

    .timeFrame ul li
    {
        color: #408315;
        display: inline;
        border-right: solid 1px #999999;
        padding: 0 5px;
    }
    
    .timeFrame ul li.last{ border: none }
    
        .timeFrame ul li a
        {
            color: #4470c0;
            font-size: 8pt;
            text-decoration: underline;
        }

/*

-Content Type Selector
************************************/
        
.contentType
{
    position: absolute;
    top: -5px;
    right: 5px;
    color: #6b6b6b;
    height: 1%;
    z-index: 9999;
    clear: both;
    text-align: right;  
    font-size: 8pt;  
    width: 260px;
}

.contentType span
{
    float: left;
    display: block;
    font-weight: bold;
}

    .contentType ul li
    {
        color: #408315;
        display: inline;
        border-right: solid 1px #999999;
        padding: 0 5px;  
        width: 255px     
    }
    
    .contentType ul li.last{ border: none }
    
        .contentType ul li a
        {
            color: #4470c0;
            font-size: 8pt;
            text-decoration: underline;
        }        
    
/*

-Grind Panel
************************************/

.grindPanel
{
    position: relative;
    width: 95px;
    text-align: left;
    float: left;
}

    .grindCounter
    {
        width: 61px;
        height: 43px;
        text-align: center;
        font-size: 8pt;
        font-weight: bold;
        color: #333333;
        padding: 3px 0;   
        background: url('../Images/GrindCounter-Background.gif') no-repeat;    
    }

        .grindCounter span
        {        
            display: block;
            font-size: 14pt;
            color: White;
        }
        
        .trashCounter
        {
            display: block;
            width: 61px;
            font-size: 8pt;
            color: #ff6633;
            text-align: center;
        }
        
        .grindIt
        {
            display: block;
            width: 28px;
            height: 28px;
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 0;
        }
        
            .grindIt em
            {
                display: block;
                width: 28px;
                height: 28px;            
                position: absolute;
                top: 0;
                left: 0;
                background: url('../Images/GrindIt-Button.gif') no-repeat;
                cursor: pointer;
            }
            
        .trashIt
        {
            display: block;
            width: 28px;
            height: 27px;
            overflow: hidden;
            position: absolute;
            top: 33px;
            right: 0;
        }
        
            .trashIt em
            {
                display: block;
                width: 28px;
                height: 27px;            
                position: absolute;
                top: 0;
                left: 0;
                background: url('../Images/TrashIt-Button.gif') no-repeat;
                cursor: pointer;
            }

/*

-Story Details Panel
************************************/

.storyDetailsPanel
{
    width: 280px;
    height: 1%;
    float: left;   
    margin: 0 40px;
    position: relative;
}

    .storyDetailsPanel a
    {
        color: #4470c0;
        display: block;
    }
    
        .storyDetailsPanel a.image
        { 
            position: absolute;  
            top: 0;
            left: 0;
        }
    
        .storyDetailsPanel a.title
        {
            margin: 0 0 5px 70px; 
            font-size: 10pt; 
            font-weight: bold; 
        }
        
        .storyDetailsPanel a.detailsLink
        { 
            display: inline;
            margin-left: 70px;         
            font-size: 8pt; 
            font-weight: bold; 
            text-decoration: underline; 
        }
        
        .storyDetailsPanel p
        {
            margin-left: 70px;
            font-size: 8pt;
            color: #333333;
        }
                
            .storyDetailsPanel p a.detailsLink
            {
                margin-left: 0;
            }

    .storyDetailsPanel img
    {
        float: left;
        border: solid 1px #898989;            
    }
    

/*

-User Info Panel
************************************/    

.userInfoPanel
{
    position: absolute;
    top: 5px;
    right: 40px;    
}
        
    .userInfoPanel img
    {
        position: absolute;
        top: 0; 
        left: 0;   
    }        
    
        .userInfoPanel .userWrapper
        {
            float: left;
            font-size: 8pt;
            padding-left: 52px;
        }
        
            .userInfoPanel .userWrapper a.user
            {       
                font-size: 8pt; 
                font-weight: bold; 
                color: #4470c0;
                text-decoration: underline; 
            }        
        
            .userInfoPanel .userWrapper span
            {
                display: block;
            }                   

/*

Graphic and User Panel
************************************/

.graphicAndUserPanel
{
    float: left;
}

    .graphicAndUserPanel img
    {
        border: solid 1px #898989;    
    }
    
    .graphicAndUserPanel span
    {
        display: block;
    }

    .graphicAndUserPanel a.user
    {
        font-size: 8pt; 
        font-weight: bold; 
        color: #4470c0;
        text-decoration: underline; 
    }

/*

Video Details Panel
************************************/

.videoDetailsPanel
{
    position: absolute;
    top: 0;
    left: 110px;
}

    .videoDetailsPanel a.title
    {
        font-size: 10pt; 
        font-weight: bold;         
        color: #4470c0;        
    }
    
    .videoDetailsPanel a.detailsLink
    { 
        display: block;    
        font-size: 8pt; 
        font-weight: bold; 
        text-decoration: underline; 
        margin-top: 5px;
        color: #4470c0;
    }
    
        .videoScroller .videos li .grindPanel
        {
            top: 60px;
            left: 10px;
        }

/*

-The Daily Grind Blog Link
************************************/

.blogLink
{
    display: block;
    width: 300px;
    height: 83px;
    position: relative;
    margin: 10px 0;
    overflow: hidden;
}

    .blogLink em
    {
        display: block;
        width: 300px;
        height: 83px;
        position: absolute;
        top: 0;
        left: 0;
        background: url('../Images/BlogLink-Background.gif');   
        cursor: pointer; 
    }

/*

-Submit to Global Grind Link
************************************/
        
.submitLink
{
    display: block;
    width: 300px;
    height: 70px;
    position: relative;
    margin: 10px 0;
    overflow: hidden;
}

    .submitLink em
    {
        display: block;
        width: 300px;
        height: 70px;
        position: absolute;
        top: 0;
        left: 0;
        background: url('../Images/SubmitLink-Background.gif');   
        cursor: pointer; 
    }    
    
/*

-User and Search Panel
************************************/

.userAndSearchPanel
{
    padding-top: 20px;
    width: 280px;
    margin: 0 auto 10px;
    position: relative;
    overflow: hidden;
}

    .userAndSearchPanel span
    {
        position: absolute;
        top: 0;
        left: 0;
        line-height: 15px;        
        color: #bff32e;
    }

        .userAndSearchPanel span a
        {
            position: relative;
            color: #bff32e;            
        }

    .userAndSearchPanel ul
    {
        position: absolute;
        top: 0;
        right: 0;
        overflow: hidden;
    }

        .userAndSearchPanel ul li
        {            
            display: block;
            float: left;            
            padding: 0 5px;
            height: 15px;
            border-right: solid 1px #cccccc;
        }
        
            .userAndSearchPanel ul li.last{ border: none }

            .userAndSearchPanel ul li a
            {
                display: block;
                float: left;
                color: #cccccc;
                font-weight: bold;
                line-height: 15px;
                text-decoration: underline;
            }

.userAndSearchPanel .search
{
    overflow: hidden;
    width: 220px;
    margin: 0 auto;
    padding: 10px 0 20px;        
}

    .userAndSearchPanel .search span
    {
        position: relative;
        display: block;
        float: left;
        height: 22px;
        padding-left: 11px;
        background: url('../Images/Search-Left.gif') no-repeat left 0;        
    }

.userAndSearchPanel input
{
    float: left;    
}

    .userAndSearchPanel .search .textBox
    {
        height: 22px;
        border: none;
        padding: 3px 11px 0 5px;
        margin-right: 5px;        
        background: url('../Images/Search-Right.gif') no-repeat right 0;
    }

.tabViewTop
{
    height: 30px;
    margin-bottom: 20px;
    border-bottom: solid 1px #b1b1b1
}

    .tabViewTop h2
    {
        color: #408315;
        font-size: 10pt;
        font-weight: bold;
        text-indent: 45px;
        line-height: 35px;
    }   
    
    .tabViewTop .contentType
    {
        top: 10px;
    }

/******************************************************
	=FAQs Styles
*******************************************************/    
   

.faqs, .detail
{
    background: #e0e0e0 url('../Images/Content-Rounded-Top.gif') no-repeat;
    padding: 20px 0 50px;   
    float: left;
    overflow: hidden;
    width: 630px; 
}

    .faqBody
    {
        padding-top: 20px;
        background: white;
    }

    
    .faqs .contentTitle
    {
        display: block;
        height: 25px;
        line-height: 25px;
        width: 255px;
        font-size: 12pt;
        color: #bff32e;
        background: #6b6b6b;
        padding: 0 10px 0 20px;
        margin-bottom: 8px;
        text-align: left;
    }

    .faqs .contentTitle span { color: White }    
    
    .faqs .subTitle
    {
        display: block;
        height: 25px;
        line-height: 25px;
        width: 255px;
        font-size: 12pt;
        color: #6b6b6b;
        padding: 0 10px 0 20px;
        margin-bottom: 8px;
        text-align: left;
    }
    
    .faqs span.question    
    {
        display: block;
        padding: 0 20px;
        color: #6b6b6b;
        font-weight: bold;        
        font-style: italic;
        
    }
   
    .faqs p
    {
        color: #6b6b6b;
        padding: 0 20px 20px 20px;
    }
 
/******************************************************
	=Registration Styles
*******************************************************/    
 
.registration 
{
    background: #e0e0e0 url('../Images/Content-Rounded-Top.gif') no-repeat;
    padding: 20px 0 50px;   
    float: left;
    overflow: hidden;
    width: 630px; 
    position: relative;
}

    .registration .contentTitle
    {
        display: block;
        height: 25px;
        line-height: 25px;
        width: 255px;
        font-size: 12pt;
        color: #bff32e;
        background: #6b6b6b;
        padding: 0 10px 0 20px;
        margin-bottom: 8px;
        text-align: left;
    }

    .registration .contentTitle span { color: White }   

        .Form
        {
            background: white;   
            border: solid 1px #9a9a9a;
            border-left: none;
            border-right: none; 
            position: relative;
            height: 1%;
            padding-bottom: 30px;
        }   
        
        fieldset.alternate
        {
            background: #e0e0e0;
        }
        
fieldset.form
{
    padding: 10px 30px;    
}

    fieldset.form a
    {
        color: #7394d0;
        text-decoration: underline;
    }

    fieldset.form h3
    {
        font-size: 120%;
        font-weight: bold;
        color: #6b6b6b;
        text-indent: -5px;
        margin-bottom: 5px;
    }
    
    fieldset.form .SubLegend
    {
        display: block;
        position: relative; 
        text-align: right; 
        border-bottom: solid 1px #aaa; 
        padding: 0 5px 5px 0; 
        top: -15px;         
    }
    
    fieldset.form .FormContent{ padding: 0 5px; }

    	fieldset.form .row { margin-bottom: 10px; clear: both; overflow: hidden; }
	        fieldset.form label { float: left; width: 160px; line-height: 20px; font-size: 100%; color: #6b6b6b; text-align: left; }			
	       
	        fieldset.form input,
	        fieldset.form select,
	        fieldset.form textarea	         
	        { 
	            float: left;
	            height: 18px;
	        	border: solid 1px #c0bebe;
	            font-size: 110%;
	            font-family:"Lucida Grande","Arial","Helvetica", sans-serif;
	            color: #000000;
	            padding: 3px 0 0 5px;
	        }
	        
	        fieldset.form select{ padding: 0; height: 21px; }	        
	        fieldset.form textarea { height: 200px }
	       	fieldset.form span.checkBox input, input.checkbox, input.radio{ width: auto !important; border: none !important; background: none !important }
	       	       
	        fieldset.form select {float: left; padding: 0; }

        fieldset.form .description
        {
            clear: left;
            font-size: 90%;
            margin-left: 160px;
            color: #999;
            font-style: italic;
            display: block;            
        }    	    


/********************/        

.txtbox { width: 340px }
fieldset.form div.mailchecks label{ margin-left: 10px; width: 460px; }
fieldset.form div.inlineRadios span { display: block; float: left; margin-right: 20px; }

fieldset.form div.zipAndCountry input{ margin-right: 10px } 

fieldset.last
{
    border-bottom: dotted 2px #c1c1c1;
}

.regButton
{
    position: absolute;
    bottom: -19px;
    right: 25px;
    overflow: hidden;
    background: url('../Images/Pager-Right.gif') no-repeat right bottom;
} 

    .regButton div
    {
        float: left;
        padding: 0 10px;
        background: url('../Images/Pager-Left.gif') no-repeat left bottom;
    }
    
    
        .SignUpButton
        {
            display: block;
            width: 82px;
            height: 32px;
            overflow: hidden;
            position: relative;
            top: -5px;                        
        }
        
            .SignUpButton em
            {
                display: block;
                width: 82px;
                height: 32px;            
                position: absolute;
                top: 0;
                left: 0;
                background: url('../Images/SignUp-Button.gif') no-repeat;
                cursor: pointer;
            }

.mobiledesc
{
    font-size: 90%;
    color: #999;
    font-style: italic;
    margin-left: 10px;
    display: block;
    position: relative;
    left: 10px;
}

.registration a.topRightLink
{
        color: #7394d0;
        text-decoration: underline;
        position: absolute;
        top: 20px;
        right: 30px;
}


/******************************************************
	=Crates Page
*******************************************************/    

.crates
{
    width: 605px;
    margin: 20px auto;
    overflow: hidden;
}

.minicrates
{
    width: 295px;
    float: left;
    padding-bottom: 20px;
}
    .right{ float: right }
        
        
.largeCrate
{
    height: 150px;
    margin-bottom: 20px;
    overflow: hidden;
}


    .largeCrate .imageWrapper
    {
        height: 150px;
        width: 200px;
        background: black;
        float: left;
        position: relative;
    }
    
        .largeCrate .imageWrapper img
        {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;         
        }
        
            .largeCrate .smallImage .imageWrapper img
            {
                border: solid 1px white;
            }
        
    
        .largeCrate .imageMask
        {
            height: 150px;
            width: 200px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            background: url('../Images/image-round-mask.gif') no-repeat left top;
        }
        
        .largeCrate .noImage .imageMask
        {
            background: url('../Images/noimage.gif') no-repeat left top;        
        }
    
    .largeCrate .contentWrapper
    {
        margin-left: 200px;
        background: white;
        height: 150px;
    }
    
    .largeCrate .header
    {
        position: relative;
        height: 36px;
        line-height: 36px;
        font-size: 12pt;
        color: #bff32e;    
        padding-left: 30px;       
        background: #6b6b6b url('../Images/crate-header-right.gif') no-repeat right;
        border-bottom: solid 1px #333333;
    }
    
    .largeCrate .header span { color: White }
        
        .largeCrate .contentWrapper .controls
        {
            position: absolute;
            top: 10px;
            right: 10px;       
            height: 15px;
            width: 23px;     
        }

            .controls .back,
            .controls .play,
            .controls .forward           
            {
                display: block;
                height: 15px;
                width: 23px;
                position: absolute;
                top: 0;
                overflow: hidden;
            }
            
                .controls .back em,
                .controls .play em,
                .controls .forward em
                {
                    display: block;
                    height: 15px;
                    width: 23px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }           
                
                .controls .back { right: 50px }
                .controls .back em{ background: url('../Images/control-back.gif') no-repeat;}

                .controls .play { right: 25px }
                .controls .play em{ background: url('../Images/control-play.gif') no-repeat;}

                .controls .forward { right: 0 }
                .controls .forward em{ background: url('../Images/control-forward.gif') no-repeat;}
                

.largeCrate .content
{
    background: white url('../Images/largecrate-content-right.gif') no-repeat right bottom;
    padding: 12px 10px;
    height: 89px;
}

    .largeCrate h5 a
    {
        color: #4470c0;
        font-size: 12pt;
    }
    
    .largeCrate .provider
    {
        font-size: 8pt;
    }
    
    .largeCrate p
    {
        margin: 5px 0;
    }
    
    .largeCrate span.firstGrind
    {        
        padding-left: 20px;
        margin-left: 10px;
        background: url('../Images/Icon-HasGrind.gif') no-repeat left center;
    }
        .largeCrate span.firstGrind a { color: #4470c0; text-decoration: underline }
    
    

.minicrate
{
    background: white;
    position: relative;
    margin-bottom: 41px;
    height: 1%;
}

    .minicrate .header
    {
        position: relative;
        height: 36px;
        line-height: 36px;
        font-size: 12pt;
        color: #bff32e;    
        padding-left: 30px;
        height: 1%;
        background: #6b6b6b url('../Images/crate-header-left.gif') no-repeat;
        border-bottom: solid 1px #333333;
    }
    
    .minicrate .header span { color: White }

    .minicrate .header .collapse
    {
        position: absolute;
        top: 13px;
        left: 10px;
        display: block;
        width: 11px;
        height: 10px;
        overflow: hidden;
    }

        .minicrate .header .collapse em
        {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 11px;
            height: 10px;
            background: url('../Images/crate-down-arrow.gif') no-repeat;
            cursor: pointer;
        }
        
    .minicrate .header .editLink
    {
        position: absolute;
        top: 0;
        right: 0;
        color: White;
        text-decoration: underline;
        font-weight: bold;
        font-size: 9pt;
        padding-right: 10px;
        background: url('../Images/crate-header-right.gif') no-repeat right;        
    }

.minicrate .greenItems
{
    position: relative;
}

.minicrate .greenItemsList
{   
    width: 196px;
    position: absolute;
    top: 0;
    right: 0;
    border-top: solid 1px white;    
}

    .minicrate .greenItemsList li
    {
        display: block;
        padding: 3px 0 3px 10px;
        border-bottom: solid 1px white;
        height: 27px;        
        background: #8cb573;  
        line-height: 9px;    
        
    }
        .minicrate .greenItemsList li.active
        {
            height: 25px;
            background: url('../Images/greenItem-Active.gif') repeat-x left top;    
        }
        
        .minicrate .greenItemsList li a
        {
            color: white;
            font-size: 8pt;
            line-height: 13px;      
            margin: 0;  
            padding: 0;    
        }

.minicrate .itemsList
{
    padding: 10px 0;
    height: 1%;
    background: url('../Images/crate-bottom-left-corner.gif') no-repeat left bottom;    
}

    .minicrate .itemsList li
    {
        display: block;
        padding-left: 20px;
        margin: 4px 0 4px 15px;
        background: url('../Images/Icon-HasGrind.gif') no-repeat left center;
    }
        .minicrate .itemsList li.NoGrind { background-image: url('../Images/Icon-NoGrind.gif') } 

        .minicrate .itemsList li a
        {
            color: #4470c0
        }

            
.cratepager
{
    position: absolute;
    bottom: -16px;
    right: 0;
    overflow: hidden;
    background: white url('../Images/crate-pager-right.gif') no-repeat right bottom;
} 

    .cratepager ul
    {
        float: left;
        padding: 0 10px;
        background: url('../Images/crate-pager-left.gif') no-repeat left bottom;
    }
        
        .cratepager ul li
        {
            float: left;
        }
        
        .cratepager ul li.previous{ border-right: solid 1px #4470c0;}
        
            .cratepager ul li a
            {
                display: block;
                line-height: 16px;
                overflow: hidden;
                position: relative;
                margin: 0 2px;
                text-align: center;
                text-decoration: underline;
                font-weight: bold;
                font-size: 8pt;
                color: #4470c0;          
                padding: 0 2px;
                      
            }
            
            .cratepager ul li.current a
            {
                color: #6b6b6b;
                text-decoration: none;
            }

            .cratepager ul li a em
            {
                display: block;
                height: 17px;
                width: 10px;
                position: absolute;
                top: 0;
                left: 0;
                background: white no-repeat center center;
                cursor: pointer;
            }                        
    
    
.featuredSiteWrapper
{
    padding-top: 20px;
    margin: 10px 0;
    background: url('../Images/featuredSite-Tab.gif') left top no-repeat;
    
}

    .featuredSiteWrapper .minicrate .header
    {   
        background: #6B6B6B;
    }
    
        .featuredSiteWrapper .minicrate .header .editLink
        {
            background-image: url('../Images/crate-header-right-drk.gif');
        }
        
        .featuredSiteWrapper .minicrate .itemsList
        {
            background: url('../Images/crate-bottom-left-corner-drk.gif') no-repeat left bottom;    
        }

.featuredSiteWrapper .cratepager
{
    background: white url('../Images/crate-pager-right-drk.png') no-repeat right bottom;
} 

    .featuredSiteWrapper .cratepager ul
    {
        background: url('../Images/crate-pager-left-drk.gif') no-repeat left bottom;
    }