﻿/**********************************************************************
* Description:  Style rules specific to child page template
* Created By:   Jason Offutt @ Central Christian Church of the East Valley
* Date Created: 4/12/2010
*
* $Workfile: child-page.css $
* $Revision: 35 $
* $Header: /trunk/Arena/Templates/Cccev/Hasselhoff/css/child-page.css   35   2011-07-26 09:43:55-07:00   jasona $
*
* $Log: /trunk/Arena/Templates/Cccev/Hasselhoff/css/child-page.css $
*  
*  Revision: 35   Date: 2011-07-26 16:43:55Z   User: jasona 
*  modify subnav length 
*  
*  Revision: 34   Date: 2011-06-07 18:27:31Z   User: JasonO 
*  Adding support for nav bar icons in subnav menu. 
*  
*  Revision: 33   Date: 2011-04-05 22:46:09Z   User: JasonO 
*  Functionality updates for Glendale campus rollout and usability 
*  improvements. 
*  
*  Revision: 32   Date: 2011-01-25 16:04:04Z   User: JasonO 
*  Adding new styles for directions page. 
*  
*  Revision: 31   Date: 2011-01-19 17:59:04Z   User: JasonO 
*  Adding new styles for service times page. 
*  
*  Revision: 30   Date: 2010-11-17 16:18:36Z   User: JasonO 
*  Removing most recent changes to list items as they conflict with other 
*  areas of the website. 
*  
*  Revision: 29   Date: 2010-11-16 23:37:18Z   User: JasonO 
*  forcing child div's nad p's to be inline display within content areas. 
*  
*  Revision: 28   Date: 2010-08-19 00:08:09Z   User: JasonO 
*  Removing top padding from subnav list to make more room for links. 
*  
*  Revision: 27   Date: 2010-08-18 20:45:40Z   User: JasonO 
*  Adding CSS for new design of staff page. 
*  
*  Revision: 26   Date: 2010-08-17 22:10:23Z   User: nicka 
*  Make everything clickable to view details. 
*  
*  Revision: 25   Date: 2010-08-17 21:42:52Z   User: JasonO 
*  Fixing CSS bugs adding styles for Webologist page 
*  
*  Revision: 24   Date: 2010-08-17 19:22:36Z   User: JasonO 
*  Fixing css bugs 
*  
* ... see history for previous changes...
**********************************************************************/

a.logo
{
    height: 140px;
    overflow: hidden;
}

#content ol li,
#page-content ol li
{
    list-style-type: decimal;
    list-style-position: inside;
}

#content ul li,
#page-content ul li
{
    list-style-type: disc;
}

    #content li ul,
    #page-content li ul
    {
        padding-left: 20px;
    }

        #content li li,
        #page-content li li
        {
            list-style-type: circle;
        
        }

#sidebar
{
    position: relative;
    float: left;
    width: 230px;
    margin-left: 32px;
    z-index: 1;
}

    #subnav, #news
    {
        padding: 0px 0px 20px 20px;
        width: 100%;
    }
    
    #subnav
    {
        height: 523px;
        background: url('../img/subnav-bg.png') no-repeat;
        overflow: hidden;
    }
		#subnav p
		{
			margin: 1em 0px;
			color: #A3A3A3;
			padding-left:10px;
			padding-right:28px;
		}
		
        #subnav h2.content-heading,
        #subnav h2.multi-line-heading
        {
            display: block;
            padding: 30px 0px;
            text-align: center;
            margin-left: -20px;
        }
        
        #subnav h2.multi-line-heading
        {
            padding: 5px 0px 7px 0px;
        }
        
        #subnav > ul
        {
            padding-left: 10px;
        }
        
        #subnav > ul > li
        {
            height: 38px;
        }
        
            #subnav > ul > li > a
            {
                font-size: 20px;
                line-height: 30px;
                color: #a3a3a3;
                position: relative;
            }
            
                #subnav > ul > li > a > img
                {
                    display: block;
                    position: absolute;
                    top: 3px;
                    right: -15px;
                }
        
            #subnav > ul > li > a:hover
            {
                color: #23c3ea;
            }
        
                #subnav .expand,
                #subnav .node
                {
                    display: block;
                    margin-left: -10px;
                    padding: 3px 0px 0px 10px;
                    width: 100%;
                    height: 38px;
                    position: absolute;
                }
                
                #subnav .expand
                {
                    background: Transparent url(../img/subnav-hover-bg.png) no-repeat;
                    color: #ffffff;
                    z-index: 1;
                }
                
                #subnav .expand:hover
                {
                    color: #ffffff;
                }
                
                #subnav .children
                {
                    display: none;
                    background: #23c3ea;
                    position: absolute;
                    padding: 10px 20px 10px 30px;
                    left: 230px;
                    margin-top: -25px;
                    width: 173px;
                    z-index: 0;
                }
            
                    #subnav .children a
                    {
                        color: #ffffff;
                        font-size: 16px;
                        line-height: 22px;
                    }
                    
                    #subnav .children a:hover
                    {
                        color: #ffffff;
                        border-bottom: 1px dotted #ffffff;
                    }
        
    #news
    {
        width: 90%;
        padding: 0px 0px 30px 33px;
        font-size: 13px;
        line-height: 17px;
        color: #676666;
    }
        
        #news h4
        {
            padding: 10px 0px;
        }
        
            #news h4 a
            {
                color: #23c3ea;
                font-size: 16px;
            }
            
            #news p strong
            {
                display: block;
                padding: 5px 0px;
                color: #252525;
            }

#page-content
{
    position: relative;
    float: left;
    width: 638px;
    margin-left: 25px;
    color: #181818;
    padding: 0px 20px;
    font-size: 14px;
    z-index: 0;
}

    #page-content a
    {
        color:  #1592CC;
    }

    #feature
    {   
        width: 678px;
        height: 457px;
        background: Transparent url(../img/child-page-feature-bg.png) no-repeat;
        margin:0 0 0 -45px;
        top: 0px;
        left: -25px;
        /*z-index: 4;*/
        overflow: hidden;
    }
    
        #feature-slider
        {
            display: block;
            height: 350px;
            width: 653px;
            margin: 43px 0px 0px 17px;
            overflow: hidden;
        }

		#feature li
		{
			display: none;
			width:653px;
			height:350px;
			position:absolute;
			top:10;
			left:10;
			overflow: hidden;
		}
		
		#feature li:first-child
		{
			display: block;
		}
		
        #feature-slider .feature-text
        {
            position: relative;
            margin-top: -270px;
            text-align: right;
        }
        
            .feature-text p.caption
            {
                background-color: #23c3ea;
                color: #000000;
                padding: 10px 20px;
                margin-right: -10px;
                width: 30%;
                font-size: 16px;
                float: right;
                clear: both;
            }
            
            .feature-text h1.heading
            {
                font-size: 72px;
                text-transform: uppercase;
                color: #ffffff !important;
                font-weight: lighter;
                background-color: #23c3ea;
                padding: 10px 20px;
                margin-right: -10px;
                float: right;
                clear: both;
            }
            
        #feature-slider .senior-pastor .feature-text,
        #feature-slider .campus .feature-text
        {
            text-align: left;
            margin-right: 404px;
            margin-top: -310px;
        }
        
            #feature-slider .senior-pastor h1.heading,
            #feature-slider .campus h1.heading
            {
                float: none;
                text-transform: none;
            }
            
            #feature-slider .campus h1.heading
            {
                height: 45px;
            }
            
            #feature-slider .campus h1.mesa
            {
                width: 220px;
            }
            
            #feature-slider .campus h1.gilbert,
            #feature-slider .campus h1.glendale
            {
                width: 270px;
            }
            
            #feature-slider .campus h1.queen-creek
            {
                width: 330px;
            }
        
            #feature-slider .senior-pastor p.caption,
            #feature-slider .campus p.caption
            {
                float: none;
                width: auto;
                padding: 0px 20px 20px 20px;
            }
            
    #feature-links
    {
        margin: 7px 0px 0px 17px;
        font-size: 14px;
        color: #000000;
        padding: 5px;
        background-color: #23c3ea;
        display: block;
        width: 180px;
    }

        #feature-links a
        {
            color: #ffffff;
            padding: 0px 3px;
            text-decoration: none;
        }
    
    #feature-nav
    {
        position: absolute;
        top: 320px;
        right: 45px;
        width: 120px;
        height: 56px;
    }

        #feature-nav a
        {
            height: 56px;
            width: 60px;
            text-indent: -2000px;
            display: block;
            float: left;
        }

        #feature-nav .left
        {
            background: url(../img/blue-arrows.png) no-repeat;
            background-position: 0px top;
        }
        
        #feature-nav .right
        {
            background: url(../img/blue-arrows.png) no-repeat;
            background-position: -60px top;
        }
    
    #articles
    {
        width: 100%;
        margin: 0px;
        padding: 0px;
        font-size: 12px;
        line-height: 20px;
    }
    
        #articles p
        {
            padding: 10px 0px;
        }
    
        #articles .two-col
        {
            position: relative;
            float: none;
            width: 100%;
            clear: both;
            padding: 5px 10px 30px 10px;
        }
        
        #articles .one-col
        {
            position: relative;
            float: left;
            width: 45%;
            padding: 5px 10px 30px 10px;
        }
        
        #articles .staff-list
        {
            display: block;
            padding-top: 20px;
        }
        
            #articles .staff-list li
            {
                list-style-type: none;
                height: 131px;
                display: block;
                padding-bottom: 20px;
                position: relative;
            }
            
                .staff-list .staff-pic
                {
                    background: url(../img/staff-pic-bg.png) no-repeat;
                    height: 129px;
                    width: 131px;
                    float: left;
                    padding: 14px 0px 0px 21px;
                }
                
                .staff-list .staff-info
                {
                    height: 64px;
                    width: 389px;
                    background: #23c3ea;
                    margin-left: 131px;
                    position: absolute;
                    top: 30px;
                    padding-left: 20px;
                }
                
                    #articles .staff-info h2
                    {
                        color: #ffffff;
                        font-size: 36px;
                        font-weight: lighter;
                    }
        
        #articles #campus-directions
        {
            display: block;
            padding-top: 10px;
        }
              
            #articles #campus-services li,
            #articles #holiday-services li,
            #articles #campus-directions li
            {
                list-style-type: none;
                padding: 5px 0px;
                display: block;
            }
            
                #campus-services .campus,
                #holiday-services .campus,
                #campus-directions .campus
                {
                    font-weight: bold;
                    text-transform: uppercase;
                    color: #181818;
                    font-size: 16px;
                }
                
                #campus-directions .campus-meta
                {
                    font-size: 14px;
                    color: #b0b0b0;
                    font-style: italic;
                    display: block;
                }
                
                #campus-services .day,
                #holiday-services .day
                {
                    clear: both;
                    float: none;
                    display: block;
                    padding-top: 5px;
                    font-weight: bold;
                }
                
                #campus-services .directions,
                #holiday-services .directions
                {
                    padding-left: 10px;
                }
                
                #campus-services .note,
                #holiday-services .note
                {
                    display: block;
                    color: #b0b0b0;
                    padding-top: 5px;
                    font-style: italic;
                }
    
    #articles .campus-info
    {
        padding: 0px 18px;
        width: 100%;
        margin-left: -50px;
    }
    
        #articles .campus-pastor
        {
            float: left;
            width: 165px;
            text-align: center;
            color: #b0b0b0;
            font-size: 16px;
        }
        
            #articles .campus-pastor img,
            #articles .campus-pastor span
            {
                display: block;
                margin: 0px auto;
            }
            
            .campus-pastor .nameplate
            {
                color: #23c3ea;
                font-size: 20px;
            }
    
        #articles .senior-pastor
        {
            float: right;
            width: 341px;
            text-align: right;
            position: relative;
        }
        
            .senior-pastor img
            {
                position: absolute;
                top: 0px;
                right: 0px;
            }
            
            .senior-pastor .nameplate
            {
                background: #23c3ea;
                float: left;
                padding: 12px 15px;
                line-height: 14px;
                margin-top: 10px;
                margin-left: 1px;
                width: 196px;
            }
            
                #page-content .nameplate h1
                {
                    color: #ffffff;
                }
                
                .nameplate span
                {
                    font-size: 18px;
                }
    
        #articles .section
        {
            float: none;
            clear: both;
            position: relative;
        }
        
            .section .map
            {
                height: 278px;
                width: 330px;
                position: relative;
                float: right;
                background: url(../img/map-bg.png) no-repeat;
                padding: 32px 0px 0px 39px;
            }
            
            .section .body-text
            {
                float: left;
                width: 260px;
                padding-top: 10px;
            }
            
            .section h3
            {
                clear: both;
                float: none;
            }
